<template>
  <!-- 整个AI生成器的覆盖层，点击自身区域可关闭 -->
  <div class="ai-generator-overlay">
    <!-- AI生成器的容器，根据isFullscreen状态添加fullscreen类 -->
    <div class="ai-generator-container" :class="{ fullscreen: isFullscreen }">
      <!-- AI生成器的头部 -->
      <div class="ai-generator-header">
        <!-- 头部左侧部分，包含标题和状态信息 -->
        <div class="header-left">
          <!-- 标题，使用Font Awesome图标 -->
          <h2><i class="fas fa-robot"></i> AI智能题库生成器</h2>
          <!-- 生成状态提示，仅在generating为true时显示 -->
          <div class="ai-status" v-if="generating">
            <!-- 脉冲点动画 -->
            <div class="pulse-dot"></div>
            <!-- 当前思考文本 -->
            <span>{{ thinkingText }}</span>
          </div>
        </div>
        <!-- 头部操作按钮区域 -->
        <div class="header-actions">
          <!-- 全屏切换按钮 -->
          <button
            class="btn-icon"
            @click="toggleFullscreen"
            :title="isFullscreen ? '退出全屏' : '全屏模式'"
          >
            <!-- 根据isFullscreen状态切换图标 -->
            <i :class="isFullscreen ? 'fas fa-compress' : 'fas fa-expand'"></i>
          </button>
          <!-- 关闭按钮 -->
          <button class="btn-icon btn-close" @click="close" title="关闭">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>

      <!-- AI生成器的内容区域 -->
      <div class="ai-generator-content">
        <!-- 配置面板，根据isGenerating状态折叠 -->
        <div class="config-panel" :class="{ collapsed: isGenerating }">
          <!-- 新增：题库创建信息 -->
          <div class="panel-section bank-create-section" v-if="false">
            <!-- 题库创建标题 -->
            <h3><i class="fas fa-folder-plus"></i> 题库信息</h3>
            <!-- 题库创建表单 -->
            <div class="form-group">
              <label>题库名称 <span class="required">*</span></label>
              <div class="input-with-icon">
                <i class="fas fa-book"></i>
                <input
                  v-model="bankData.name"
                  type="text"
                  placeholder="请输入题库名称"
                  class="modern-input"
                  :readonly="!!referenceFile"
                  :class="{ readonly: !!referenceFile }"
                />
              </div>
              <div class="ai-hint" v-if="!!referenceFile">
                <i class="fas fa-robot"></i> AI将通过参考文件自动生成题库名称
              </div>
            </div>
            <div class="form-group">
              <label>题库描述</label>
              <div class="input-with-icon textarea-container">
                <i class="fas fa-align-left"></i>
                <textarea
                  v-model="bankData.description"
                  placeholder="请输入题库描述（选填）"
                  class="modern-input text-area"
                  rows="3"
                  :readonly="!!referenceFile"
                  :class="{ readonly: !!referenceFile }"
                ></textarea>
              </div>
              <div class="ai-hint" v-if="!!referenceFile">
                <i class="fas fa-robot"></i> AI将通过参考文件自动生成题库描述
              </div>
            </div>
          </div>

          <!-- 移动到这里：快速操作按钮区域 -->
          <div class="quick-action-buttons">
            <!-- 模板按钮 -->
            <button class="btn-templates" @click="showTemplates">
              <div class="btn-icon-container">
                <i class="fas fa-copy"></i>
              </div>
              <div class="btn-text">
                <span class="btn-title">使用模板</span>
                <span class="btn-desc">快速创建经典题库</span>
              </div>
            </button>

            <!-- 一键创建按钮 -->
            <button class="btn-quick-create" @click="showQuickCreate">
              <div class="btn-icon-container">
                <i class="fas fa-magic"></i>
              </div>
              <div class="btn-text">
                <span class="btn-title">一键智能创建</span>
                <span class="btn-desc">AI智能分析题型</span>
              </div>
            </button>
          </div>

          <!-- 生成配置部分 -->
          <div class="panel-section">
            <!-- 生成配置标题，使用Font Awesome图标 -->
            <h3><i class="fas fa-cog"></i> 生成配置</h3>
            <!-- 表单网格布局 -->
            <div class="form-grid">
              <!-- 主题/关键词表单组 -->
              <div class="form-group">
                <!-- 标签 -->
                <label>主题/关键词</label>
                <!-- 带有图标的输入框 -->
                <div class="input-with-icon">
                  <!-- Font Awesome图标 -->
                  <i class="fas fa-tags"></i>
                  <!-- 输入框，使用v-model绑定config.keywords -->
                  <input
                    v-model="config.keywords"
                    type="text"
                    placeholder="例如：前端开发、Java编程、数据库...（多个关键词可用中文，或英文,隔开）"
                    class="modern-input"
                    :readonly="generating || !!referenceFile"
                    :class="{ readonly: !!referenceFile }"
                  />
                </div>
                <div class="ai-hint" v-if="!!referenceFile">
                  <i class="fas fa-robot"></i> AI将通过参考文件自动生成内容
                </div>
              </div>

              <!-- 参考文件显示区域 -->
              <div class="file-preview" v-if="referenceFile">
                <div class="file-preview-card">
                  <div class="file-icon">
                    <i class="fas fa-file-alt"></i>
                  </div>
                  <div class="file-info">
                    <span class="file-name">{{ referenceFile.name }}</span>
                    <span class="file-size"
                      >({{ formatFileSize(referenceFile.size) }})</span
                    >
                  </div>
                  <button
                    class="btn-remove-file"
                    @click="removeFile"
                    title="删除文件"
                  >
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>

              <!-- 题目数量表单组 -->
              <div class="form-group">
                <!-- 标签 -->
                <label>题目数量</label>
                <!-- 带有图标的输入框 -->
                <div class="input-with-icon">
                  <!-- Font Awesome图标 -->
                  <i class="fas fa-hashtag"></i>
                  <!-- 更改为只读输入框，显示总题数 -->
                  <input
                    :value="totalQuestions"
                    type="number"
                    class="modern-input"
                    readonly
                  />
                </div>
              </div>

              <!-- 难度级别表单组 -->
              <div class="form-group">
                <!-- 标签 -->
                <label>难度级别</label>
                <!-- 带有图标的选择框 -->
                <div class="input-with-icon">
                  <!-- Font Awesome图标 -->
                  <i class="fas fa-signal"></i>
                  <!-- 选择框，使用v-model绑定config.difficulty -->
                  <select v-model="config.difficulty" class="modern-input">
                    <!-- 遍历difficultyOptions生成选项 -->
                    <option
                      v-for="(label, value) in difficultyOptions"
                      :value="value"
                      :key="value"
                    >
                      {{ label }}
                    </option>
                  </select>
                </div>
              </div>

              <!-- 生成风格表单组 -->
              <div class="form-group">
                <!-- 标签 -->
                <label>生成风格</label>
                <!-- 带有图标的选择框 -->
                <div class="input-with-icon">
                  <!-- Font Awesome图标 -->
                  <i class="fas fa-paint-brush"></i>
                  <!-- 选择框，使用v-model绑定config.style -->
                  <select v-model="config.style" class="modern-input">
                    <!-- 遍历styleOptions生成选项 -->
                    <option
                      v-for="(label, value) in styleOptions"
                      :value="value"
                      :key="value"
                    >
                      {{ label }}
                    </option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <!-- 题型配置部分 -->
          <div class="panel-section">
            <!-- 题型配置标题，使用更简洁的布局 -->
            <div class="section-header">
              <div class="header-left">
                <i class="fas fa-list-alt"></i>
                <h3>题型配置</h3>
              </div>
              <!-- 中间部分显示配额指示器，根据总题数变换颜色和显示效果 -->
              <div
                class="total-count"
                :class="{
                  'count-limit': totalQuestions >= 30,
                  'quota-normal': totalQuestions > 0 && totalQuestions < 30,
                }"
              >
                <span
                  class="highlight"
                  :class="{ 'highlight-warning': totalQuestions >= 30 }"
                  >{{ totalQuestions }}</span
                >
                / <span class="max-count">30</span> 题
              </div>
            </div>

            <!-- 题型配置网格布局 -->
            <div class="type-config-grid">
              <!-- 遍历questionTypes生成题型卡片 -->
              <div
                v-for="type in questionTypes"
                :key="type.value"
                class="type-config-card"
                :class="{ active: isTypeSelected(type.value) }"
                @click="toggleQuestionType(type.value)"
              >
                <!-- 题型图标，根据typeColors设置背景颜色 -->
                <div
                  class="type-icon"
                  :style="{ backgroundColor: typeColors[type.value] }"
                >
                  <!-- Font Awesome图标 -->
                  <i :class="type.icon"></i>
                </div>
                <!-- 题型信息 -->
                <div class="type-info">
                  <!-- 题型名称 -->
                  <span class="type-name">{{ type.label }}</span>
                  <!-- 题型描述 -->
                  <span class="type-desc">{{
                    getTypeDescription(type.value)
                  }}</span>
                </div>
                <!-- 题型数量控制，仅在该题型被选中时显示 -->
                <div class="type-count" v-if="isTypeSelected(type.value)">
                  <!-- 减少数量按钮 -->
                  <button
                    class="count-btn"
                    @click.stop="decrementType(type.value)"
                  >
                    <i class="fas fa-minus"></i>
                  </button>
                  <!-- 当前数量 -->
                  <span class="count-value">{{
                    config.questionTypes[type.value]
                  }}</span>
                  <!-- 增加数量按钮 -->
                  <button
                    class="count-btn"
                    @click.stop="incrementType(type.value)"
                  >
                    <i class="fas fa-plus"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 操作按钮区域 -->
          <!--
          <div class="action-buttons">
            <button
              class="btn-generate"
              @click="startGenerate"
              :disabled="generating || !canGenerate || !canContinueGenerate"
            >
              <i class="fas fa-bolt"></i> 开始生成
            </button>

            <button
              v-if="previewQuestions.length > 0 && !generating"
              class="btn-batch-accept"
              @click="acceptAllQuestions"
            >
              <i class="fas fa-check-double"></i> 全部采用
            </button>
            <button class="btn-cancel" @click="close">取消</button>
          </div>
          -->

          <!-- 模板选择器面板 -->
          <div class="template-selector" v-if="showTemplateSelector">
            <div class="template-modal">
              <div class="template-header">
                <h3><i class="fas fa-copy"></i> 选择题库模板</h3>
                <div class="template-header-actions">
                  <button
                    class="btn-refresh"
                    @click="refreshTemplates"
                    :disabled="isLoadingTemplates"
                    :title="isLoadingTemplates ? '正在加载模板...' : '刷新模板'"
                  >
                    <i
                      class="fas fa-sync-alt"
                      :class="{ 'fa-spin': isLoadingTemplates }"
                    ></i>
                  </button>
                  <button
                    class="btn-close"
                    @click="showTemplateSelector = false"
                  >
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>

              <div class="template-content">
                <p class="template-intro">
                  选择一个预设模板快速创建高质量题库，支持后续自定义修改。
                </p>

                <!-- 模板加载中动画 -->
                <div v-if="isLoadingTemplates" class="template-loading">
                  <div class="loading-animation">
                    <div class="ai-avatar">
                      <i class="fas fa-robot"></i>
                    </div>
                    <div class="loading-text">{{ thinkingText }}</div>
                  </div>
                </div>

                <!-- 模板列表 -->
                <div v-else class="template-cards">
                  <div
                    v-for="template in templates"
                    :key="template.id"
                    class="template-card"
                    :class="{ selected: selectedTemplate === template.id }"
                    @click="selectTemplate(template)"
                  >
                    <div class="template-icon">
                      <i class="fas fa-book-open"></i>
                    </div>
                    <div class="template-info">
                      <div class="template-name">{{ template.name }}</div>
                      <div class="template-description">
                        {{ template.description }}
                      </div>
                      <div class="template-stats">
                        <div
                          class="template-difficulty"
                          :class="template.difficulty"
                        >
                          <i class="fas fa-signal"></i>
                          {{ getDifficultyName(template.difficulty) }}
                        </div>
                        <div class="type-distribution">
                          <span
                            v-for="(count, type) in template.structure"
                            :key="type"
                            :style="{ backgroundColor: typeColors[type] }"
                            class="type-badge"
                          >
                            {{ getTypeName(type) }}: {{ count }}
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="selection-indicator">
                      <i class="fas fa-check-circle"></i>
                    </div>
                  </div>
                </div>
              </div>

              <div class="template-actions">
                <button
                  class="btn-cancel"
                  @click="showTemplateSelector = false"
                >
                  <i class="fas fa-times"></i> 取消
                </button>
                <button
                  class="btn-apply-template"
                  @click="applyTemplate"
                  :disabled="!selectedTemplate || isLoadingTemplates"
                >
                  <i class="fas fa-check"></i> 应用模板
                </button>
              </div>
            </div>
          </div>

          <!-- 一键智能创建面板 -->
          <div class="quick-create-panel" v-if="showQuickCreatePanel">
            <div class="quick-create-modal">
              <div class="quick-create-header">
                <h3><i class="fas fa-magic"></i> 一键智能创建</h3>
                <button class="btn-close" @click="showQuickCreatePanel = false">
                  <i class="fas fa-times"></i>
                </button>
              </div>

              <div class="quick-create-content">
                <div class="quick-create-intro">
                  <div class="intro-icon">
                    <i class="fas fa-wand-magic-sparkles"></i>
                  </div>
                  <div class="intro-content">
                    <h3>智能创建题库</h3>
                    <div class="intro-features">
                      <div class="feature-item">
                        <i class="fas fa-brain"></i>
                        <span>通过AI分析，智能创建题库和题目的最佳搭配</span>
                      </div>
                      <div class="feature-item">
                        <i class="fas fa-sliders-h"></i>
                        <span>只需简单设置，系统将自动生成高质量试题</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="quick-create-form">
                  <div class="form-section">
                    <h4 class="section-title">
                      <i class="fas fa-hashtag"></i>
                      基本信息
                    </h4>

                    <div class="input-group">
                      <label>主题关键词</label>
                      <div class="input-with-icon">
                        <i class="fas fa-tags"></i>
                        <input
                          v-model="config.keywords"
                          placeholder="输入主题关键词，如：JavaScript基础、React组件、CSS布局（多个关键词可用中文，或英文,隔开）"
                          class="modern-input"
                          :readonly="!!referenceFile"
                          :class="{ readonly: !!referenceFile }"
                          @input="updateKeywordTags"
                        />
                      </div>
                      <div class="ai-hint" v-if="!!referenceFile">
                        <i class="fas fa-robot"></i>
                        AI将通过参考文件智能生成题目内容
                      </div>
                      <div class="ai-hint" v-else>
                        <i class="fas fa-lightbulb"></i>
                        AI将根据关键词智能生成题目内容
                      </div>
                      <!-- 添加关键词标签显示区域 -->
                      <div
                        class="keyword-tags"
                        v-if="keywordTags && keywordTags.length > 0"
                      >
                        <transition-group name="tag-fade">
                          <span
                            v-for="(tag, index) in filteredKeywordTags"
                            :key="tag"
                            class="keyword-tag"
                            @click="removeKeyword(index)"
                          >
                            <i class="fas fa-tag"></i>
                            {{ tag }}
                            <i class="fas fa-times"></i>
                          </span>
                        </transition-group>
                      </div>
                    </div>
                  </div>

                  <div class="form-section">
                    <h4 class="section-title">
                      <i class="fas fa-sliders-h"></i>
                      智能参数
                    </h4>

                    <div class="option-group">
                      <label>题目数量</label>
                      <div class="range-with-display">
                        <div class="range-slider">
                          <input
                            type="range"
                            v-model.number="quickCreateOptions.questionCount"
                            min="5"
                            max="30"
                            step="1"
                          />
                        </div>
                        <div class="range-display">
                          <span class="value">{{
                            quickCreateOptions.questionCount
                          }}</span>
                          <span class="unit">题</span>
                        </div>
                      </div>
                    </div>

                    <div class="option-group">
                      <label>难度倾向</label>
                      <div class="difficulty-selector">
                        <button
                          v-for="(label, value) in difficultyOptions"
                          :key="value"
                          class="difficulty-option"
                          :class="{
                            active: quickCreateOptions.difficultyBias === value,
                          }"
                          @click="quickCreateOptions.difficultyBias = value"
                        >
                          <span
                            class="difficulty-dot"
                            :style="{
                              backgroundColor: difficultyColors[value],
                            }"
                          ></span>
                          <span>{{ label }}</span>
                        </button>
                      </div>
                    </div>

                    <div class="option-group">
                      <label>题型选择</label>
                      <div class="type-selector">
                        <button
                          v-for="type in questionTypes"
                          :key="type.value"
                          class="type-option"
                          :class="{
                            active: quickCreateOptions.preferredTypes.includes(
                              type.value
                            ),
                            [type.value]:
                              quickCreateOptions.preferredTypes.includes(
                                type.value
                              ),
                          }"
                          @click="togglePreferredType(type.value)"
                        >
                          <div
                            class="type-icon"
                            :style="{ backgroundColor: typeColors[type.value] }"
                          >
                            <i :class="type.icon"></i>
                          </div>
                          <span>{{ type.label }}</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="ai-suggestion">
                  <div class="ai-suggestion-icon">
                    <i class="fas fa-robot"></i>
                  </div>
                  <div class="ai-suggestion-content">
                    <div class="ai-suggestion-title">AI建议</div>
                    <div class="ai-suggestion-text">
                      根据您的选择，AI建议采用"{{
                        getDifficultyName(quickCreateOptions.difficultyBias)
                      }}"难度，生成{{
                        quickCreateOptions.questionCount
                      }}道题目，包含{{ getSelectedTypeNames() }}。
                    </div>
                  </div>
                </div>
              </div>

              <div class="quick-create-actions">
                <button
                  class="btn-cancel"
                  @click="showQuickCreatePanel = false"
                >
                  <i class="fas fa-times"></i> 取消
                </button>
                <button
                  class="btn-quick-generate"
                  @click="startQuickCreate"
                  :disabled="!canContinueGenerate"
                >
                  <i class="fas fa-bolt"></i> 一键智能生成
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 生成结果面板，根据isGenerating或previewQuestions长度展开 -->
        <div
          class="result-panel"
          :class="{ expanded: isGenerating || previewQuestions.length > 0 }"
        >
          <!-- 结果面板头部 -->
          <div class="result-header">
            <!-- 结果面板标题，使用Font Awesome图标 -->
            <h3><i class="fas fa-magic"></i> 生成结果</h3>
            <!-- 结果统计信息 -->
            <div class="result-stats">
              <!-- 遍历selectedTypes生成统计项 -->
              <div class="stat-item" v-for="type in selectedTypes" :key="type">
                <!-- 统计徽章，根据typeColors设置背景颜色 -->
                <span
                  class="stat-badge"
                  :style="{ backgroundColor: typeColors[type] }"
                >
                  {{ getTypeName(type) }}
                </span>
                <!-- 已生成题目数量/配置题目数量 -->
                <span class="stat-count"
                  >{{ getPreviewCount(type) }}/{{
                    config.questionTypes[type]
                  }}</span
                >
              </div>

              <!-- 添加各题型标签 -->
              <template v-if="selectedTypes.length === 0">
                <div
                  class="type-tag"
                  v-for="type in filteredQuestionTypes"
                  :key="'tag-' + type.key"
                  :style="{
                    backgroundColor: typeColors[type.key]
                      ? typeColors[type.key]
                      : '#6B7280',
                  }"
                >
                  {{ type.name }}: {{ getTypeCount(type.key) }}/{{ type.count }}
                </div>
              </template>

              <!-- 添加配额指示器 -->
              <div
                class="quota-indicator"
                :class="{
                  'quota-warning': totalQuestions >= 30,
                  'quota-normal': totalQuestions > 0 && totalQuestions < 30,
                }"
              >
                <i
                  class="fas"
                  :class="
                    totalQuestions >= 30
                      ? 'fa-exclamation-circle'
                      : 'fa-info-circle'
                  "
                ></i>
                <span class="quota-count">{{ totalQuestions }}</span
                >/<span class="quota-total">30</span> 题
              </div>
            </div>
          </div>

          <!-- 结果面板内容 -->
          <div class="result-content">
            <!-- 生成状态，仅在generating为true时显示 -->
            <div v-if="generating" class="generating-state">
              <!-- AI思考动画 -->
              <div class="ai-thinking-animation">
                <!-- AI头像，使用Font Awesome图标 -->
                <div class="ai-avatar">
                  <i class="fas fa-robot"></i>
                </div>
                <!-- 思考气泡 -->
                <div class="thinking-bubbles">
                  <!-- 遍历thinkingTexts生成气泡，根据thinkingText设置激活状态 -->
                  <div
                    class="bubble"
                    v-for="(text, index) in thinkingTexts"
                    :key="index"
                    :class="{ active: thinkingText === text }"
                  >
                    {{ text }}
                  </div>
                </div>
              </div>

              <!-- 进度条容器 -->
              <div class="progress-container">
                <!-- 进度信息 -->
                <div class="progress-info">
                  <!-- 进度提示 -->
                  <span>生成进度</span>
                  <!-- 当前进度百分比 -->
                  <span>{{ progress }}%</span>
                </div>
                <!-- 进度条 -->
                <div class="progress-bar">
                  <!-- 进度填充，根据progress设置宽度 -->
                  <div
                    class="progress-fill"
                    :style="{ width: `${progress}%` }"
                  ></div>
                </div>
              </div>
            </div>

            <!-- 错误提示，仅在error存在时显示 -->
            <div v-if="error" class="error-message">
              <!-- Font Awesome图标 -->
              <i class="fas fa-exclamation-triangle"></i>
              <!-- 错误信息 -->
              {{ error }}
            </div>

            <!-- 题目预览，仅在previewQuestions长度大于0时显示 -->
            <div v-if="previewQuestions.length > 0" class="questions-preview">
              <!-- 遍历previewQuestions生成题目卡片 -->
              <div
                v-for="(q, idx) in previewQuestions"
                :key="'preview-' + idx"
                class="question-card"
                :class="q.type"
                :regenerating="q.regenerating ? 'true' : 'false'"
              >
                <!-- 删除按钮 - 独立放在卡片右上角 -->
                <div
                  class="delete-btn"
                  @click="rejectQuestion(idx)"
                  title="删除此题目"
                >
                  <i class="fas fa-trash-alt"></i>
                </div>
                <!-- 题目头部 -->
                <div class="question-header">
                  <!-- 题目序号 -->
                  <div class="question-number">{{ idx + 1 }}.</div>

                  <!-- 题目类型徽章，根据typeColors设置背景颜色 -->
                  <span
                    class="question-type"
                    :style="{ backgroundColor: typeColors[q.type] }"
                  >
                    {{ getTypeName(q.type) }}
                  </span>
                  <!-- 题目难度徽章，根据getDifficultyStyle设置样式 -->
                  <span
                    class="question-difficulty"
                    :style="getDifficultyStyle(q.difficulty)"
                  >
                    {{ getDifficultyName(q.difficulty) }}
                  </span>
                </div>
                <!-- 题目内容 -->
                <div class="question-content">
                  {{ q.content }}
                </div>
                <!-- 题目选项，仅在q.options存在时显示 -->
                <div class="question-options" v-if="q.options">
                  <!-- 遍历q.options.split('\n')生成选项 -->
                  <div
                    v-for="(option, optIdx) in typeof q.options === 'string'
                      ? q.options.split('\n')
                      : []"
                    :key="optIdx"
                    class="option-item"
                    :class="{ correct: isCorrectAnswer(q, option) }"
                  >
                    <!-- 选中标记，仅在当前选项为正确答案时显示 -->
                    <div
                      v-if="isCorrectAnswer(q, option)"
                      class="correct-indicator"
                    >
                      <i class="fas fa-check-circle"></i>
                    </div>
                    <!-- 选项内容 -->
                    <div class="option-content">
                      {{ option }}
                    </div>
                  </div>
                </div>
                <!-- 题目底部 -->
                <div class="question-footer">
                  <!-- 参考答案部分，不显示简答题的答案 -->
                  <div
                    class="answer-section"
                    v-if="q.correct_answer && q.type !== 'shortanswer'"
                  >
                    <!-- 答案标签 -->
                    <span class="answer-label">参考答案:</span>
                    <!-- 格式化后的答案 -->
                    <span class="answer-value">{{ formatAnswer(q) }}</span>
                  </div>

                  <!-- 答案解析部分 -->
                  <div class="parse-section" v-if="q.parse">
                    <div class="parse-title">
                      <i class="fas fa-lightbulb"></i> 答案解析
                    </div>
                    <div class="parse-content">
                      {{ q.parse }}
                    </div>
                  </div>

                  <div class="footer-actions">
                    <!-- AI生成标签 -->
                    <div class="ai-tag">
                      <i class="fas fa-robot"></i> AI生成
                    </div>
                    <!-- 题目操作按钮 -->
                    <div class="question-actions">
                      <!-- 重新生成按钮 -->
                      <button
                        class="btn-action btn-regenerate"
                        @click="regenerateQuestion(q, idx)"
                        v-if="!generating"
                        :disabled="q.regenerating"
                        :class="{ loading: q.regenerating }"
                      >
                        <i
                          :class="
                            q.regenerating
                              ? 'fas fa-spinner fa-spin'
                              : 'fas fa-sync-alt'
                          "
                        ></i>
                        {{ q.regenerating ? "生成中" : "重生成" }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 空状态，仅在generating为false且previewQuestions长度为0时显示 -->
            <div
              v-if="!generating && previewQuestions.length === 0"
              class="empty-state"
            >
              <!-- 空状态插图，使用Font Awesome图标 -->
              <div class="empty-illustration">
                <i class="fas fa-lightbulb"></i>
              </div>
              <!-- 提示标题 -->
              <h4>等待生成题目</h4>
              <!-- 提示信息 -->
              <p>
                配置好生成选项后，点击"开始生成"按钮，或上传参考文件由AI智能分析
              </p>

              <!-- 文件卡片，仅在有参考文件时显示 -->
              <div v-if="referenceFile" class="file-card">
                <div class="file-card-icon">
                  <i class="fas fa-file-alt"></i>
                </div>
                <div class="file-card-info">
                  <div class="file-card-name">{{ referenceFile.name }}</div>
                  <div class="file-card-size">
                    {{ formatFileSize(referenceFile.size) }}
                  </div>
                </div>
                <button
                  class="file-card-remove"
                  @click="removeFile"
                  title="删除文件"
                >
                  <i class="fas fa-times"></i>
                </button>
              </div>

              <!-- 上传文件按钮，仅在没有参考文件时显示 -->
              <button v-else class="btn-upload-file" @click="uploadFile">
                <!-- 上传文件图标 -->
                <i class="fas fa-file-upload"></i> 上传参考文件
              </button>
              <!-- 添加参考文件说明 -->
              <div class="file-upload-hint">
                <i class="fas fa-info-circle"></i>
                <span
                  >上传参考文件后，AI将自动分析内容并生成题库名称、描述和题目</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="ai-generator-footer">
        <div
          class="generation-hint"
          v-if="previewQuestions.length > 0 && !generating"
        >
          <i class="fas fa-info-circle"></i>
          请先处理完当前题目（全部采用或全部弃用）再继续生成
        </div>
        <button
          class="btn-generate"
          @click="startGenerate"
          :disabled="generating || !canGenerate || !canContinueGenerate"
        >
          <i class="fas fa-bolt"></i>
          {{ generating ? "生成中..." : "开始生成" }}
        </button>
        <button
          class="btn-save"
          v-if="previewQuestions.length > 0 && !generating"
          @click="acceptAllQuestions"
        >
          <i class="fas fa-check-double"></i> 全部采用
        </button>
        <button
          class="btn-reject"
          v-if="previewQuestions.length > 0 && !generating"
          @click="rejectAllQuestions"
        >
          <i class="fas fa-trash-alt"></i> 全部弃用
        </button>
        <button class="btn-cancel" @click="close">
          <i class="fas fa-times-circle"></i> 取消/关闭
        </button>
      </div>
    </div>

    <!-- 自定义确认对话框 -->
    <div class="custom-confirm-dialog" v-if="showConfirmDialog">
      <div class="confirm-dialog-content">
        <div class="confirm-dialog-header">
          <span class="confirm-dialog-title">
            <i class="fas fa-exclamation-triangle warning-icon"></i>
            提示
          </span>
        </div>
        <div class="confirm-dialog-body">
          {{ confirmMessage }}
        </div>
        <div class="confirm-dialog-footer">
          <button class="btn-cancel" @click="cancelCloseDialog">取消</button>
          <button class="btn-confirm" @click="confirmCloseDialog">
            确定关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入 API AI接口
import callSiliconAI, {
  quickGenerateBank,
  generateWithReference,
  regenerateQuestion,
} from "@/api/generate";

// 导入 API 题库接口
import { addBankVzQuestion } from "@/api/question";

// 导入Vuex的mapActions和mapMutations辅助函数
import { mapActions, mapMutations } from "vuex";

export default {
  // 组件名称
  name: "AIGenerator",
  // 接收的props
  props: {
    // 题库ID，类型可以是字符串或数字，必填
    bankId: {
      type: [String, Number],
      required: false,
      default: null,
    },
  },
  // 组件数据
  data() {
    return {
      // 是否全屏
      isFullscreen: false,
      // 最大题目数量限制
      maxTotalQuestions: 30,
      // 新增：题库创建数据
      bankData: {
        name: "",
        description: "",
      },
      // 参考文件
      referenceFile: null,
      // 文件内容
      fileContent: null,
      // 生成配置
      config: {
        // 难度级别，默认中等
        difficulty: "medium",
        // 主题/关键词
        keywords: "",
        // 生成风格，默认考试风格
        style: "exam",
        // 题型配置
        questionTypes: {
          // 单选题数量，默认5
          single: 0,
          // 多选题数量，默认3
          multiple: 0,
          // 判断题数量，默认2
          truefalse: 0,
          // 填空题数量，默认0
          fillblank: 0,
          // 简答题数量，默认0
          shortanswer: 0,
        },
      },
      // 是否正在生成
      generating: false,
      // 生成进度
      progress: 0,
      // 当前思考文本
      thinkingText: "正在分析知识要点...",
      // 思考文本列表
      thinkingTexts: [
        "正在分析知识要点...",
        "正在构建题目结构...",
        "正在验证答案准确性...",
        "正在优化题目表述...",
        "正在进行最终检查...",
      ],
      // 思考文本切换定时器
      thinkingInterval: null,
      // 错误信息
      error: null,
      // 预览题目列表
      previewQuestions: [],
      // 难度选项
      difficultyOptions: {
        easy: "简单",
        medium: "中等",
        hard: "困难",
      },
      // 风格选项
      styleOptions: {
        exam: "考试风格",
        practice: "练习风格",
        conceptual: "概念理解",
        application: "应用实践",
        creative: "创新思维",
      },
      // 题型列表
      questionTypes: [
        { value: "single", label: "单选题", icon: "fas fa-dot-circle" },
        { value: "multiple", label: "多选题", icon: "fas fa-check-double" },
        { value: "fillblank", label: "填空题", icon: "fas fa-pencil-alt" },
        { value: "truefalse", label: "判断题", icon: "fas fa-balance-scale" },
        { value: "shortanswer", label: "简答题", icon: "fas fa-pen-fancy" },
      ],
      // 题型颜色配置
      typeColors: {
        single: "#4361EE",
        multiple: "#3A0CA3",
        fillblank: "#F59E0B",
        truefalse: "#10B981",
        shortanswer: "#8B5CF6",
      },
      // 难度颜色配置
      difficultyColors: {
        easy: "#10B981",
        medium: "#F59E0B",
        hard: "#EF4444",
      },
      // 是否正在生成
      isGenerating: false, // 添加这个响应式属性

      // 题型映射（前端名称 -> 后端数字）
      typeMapping: {
        single: 0, // 单选题
        multiple: 1, // 多选题
        fillblank: 2, // 填空题
        truefalse: 3, // 判断题
        shortanswer: 4, // 简答题
      },

      // 难度映射（前端名称 -> 后端难度范围）
      difficultyMapping: {
        easy: { min: 0, max: 3 }, // 简单
        medium: { min: 4, max: 7 }, // 中等
        hard: { min: 8, max: 10 }, // 困难
      },

      // 题库模板
      templates: [],
      // 添加模板相关状态
      defaultTemplates: [],
      isLoadingTemplates: false,
      templatesLoaded: false,

      // 一键智能创建配置
      quickCreateOptions: {
        questionCount: 15, // Mantenemos este valor ya que está por debajo de 30
        difficultyBias: "medium",
        preferredTypes: ["single", "multiple", "truefalse"],
      },

      // UI控制
      showTemplateSelector: false,
      showQuickCreatePanel: false,
      selectedTemplate: null,

      // AI 返回题库对象
      aiReturnBank: {
        bankName: "",
        bankDescription: "",
        questions: [
          {
            content: "", //  题目内容
            type: 0, // 题目类型 0 单选题，1 选择题，2 填空题 3 判断题 4 简答题
            difficulty: 0, // 难度等级 三个等级 简单（1 - 3） 中等（4 - 7） 困难 （8 - 10）， 需要使用数字
            options: "", // 选项，多选题使用数组，单选题使用字符串，判断题使用字符串，填空题和简答题没有选项
            parse: "", // 答案解析
            answer: "", // 正确答案 显示正确的选项，多个正确答案逗号隔开
          },
        ],
      },
      // 关键词标签列表
      keywordTags: [],
      // 创建的题库ID
      createdBankId: null,
      showConfirmDialog: false,
      confirmMessage: "",
    };
  },
  // 计算属性
  computed: {
    // 选中的题型
    selectedTypes() {
      return Object.keys(this.config.questionTypes).filter(
        (type) => this.config.questionTypes[type] > 0
      );
    },
    // 是否可以开始生成
    canGenerate() {
      const hasReferenceFile = !!this.referenceFile;

      return (
        // 如果有参考文件，则不需要关键词和题库名称
        (hasReferenceFile ||
          // 否则主题/关键词不为空且题库名称不为空
          this.config.keywords.trim().length > 0) &&
        // 总题目数量大于0
        this.totalQuestions > 0 &&
        // 总题目数量不超过30
        this.totalQuestions <= this.maxTotalQuestions
      );
    },
    // 是否可以继续生成（当没有已生成题目，或所有题目已采用或删除）
    canContinueGenerate() {
      // 如果没有已生成题目，并且总数量不超过最大限制，可以生成
      if (
        this.previewQuestions.length === 0 &&
        this.totalQuestions <= this.maxTotalQuestions
      ) {
        return true;
      }
      // 如果正在生成，不能继续生成
      if (this.generating) {
        return false;
      }
      // 如果有预览题目，不能继续生成，需要全部采用或删除
      return false;
    },
    // 总题目数量
    totalQuestions() {
      return Object.values(this.config.questionTypes).reduce(
        (a, b) => a + b,
        0
      );
    },
    // 过滤后的关键词标签
    filteredKeywordTags() {
      return this.keywordTags.filter((tag) => tag && tag.length > 0);
    },
    filteredQuestionTypes() {
      return Object.entries(this.config.questionTypes)
        .filter(([type, count]) => count > 0)
        .map(([type, count]) => ({
          key: type,
          name: this.getTypeName(type),
          count: count,
        }));
    },
    // 获取按题型分类的题目统计
    typeStats() {
      const stats = {};
      // 初始化所有题型的计数为0
      this.questionTypes.forEach((type) => {
        stats[type.value] = 0;
      });
      // 计算每种题型的题目数量
      this.previewQuestions.forEach((q) => {
        if (stats[q.type] !== undefined) {
          stats[q.type]++;
        }
      });
      return stats;
    },
  },
  // 监听属性
  watch: {
    "config.keywords": {
      handler(newVal) {
        if (newVal) {
          this.keywordTags = newVal
            .split(/[,，、]/)
            .map((k) => k.trim())
            .filter((k) => k.length > 0);
        } else {
          this.keywordTags = [];
        }
      },
      immediate: true,
    },
  },
  // 生命周期钩子
  mounted() {
    // 初始化 aiReturnBank
    this.aiReturnBank.bankName = this.bankData.name;
    this.aiReturnBank.bankDescription = this.bankData.description;
    this.aiReturnBank.questions = [];

    // 初始化默认模板 - 用于在API失败时显示
    this.initDefaultTemplates();

    // 加载模板
    this.loadTemplates();
  },
  // 方法
  methods: {
    // 从Vuex引入相关方法
    ...mapMutations({
      addBankToStore: "question/ADD_BANK", // 添加题库到Vuex store
      addQuestionToStore: "question/ADD_QUESTION", // 添加题目到Vuex store
    }),
    ...mapActions({
      fetchBanks: "question/fetchBanks", // 获取题库列表的action
    }),

    // 重置所有配置
    resetAllConfig() {
      // 重置题库基本信息
      this.bankData = {
        name: "",
        description: "",
      };

      // 重置配置信息
      this.config = {
        keywords: "",
        style: "standard",
        difficulty: "medium",
        questionTypes: {
          single: 0,
          multiple: 0,
          fillblank: 0,
          truefalse: 0,
          shortanswer: 0,
        },
      };

      // 重置文件相关
      this.referenceFile = null;
      this.fileContent = null;

      // 重置预览列表
      this.previewQuestions = [];

      // 重置状态
      this.generating = false;
      this.progress = 0;
      this.error = null;
    },

    // 移除关键词标签
    removeKeyword(index) {
      const keywords = [...this.keywordTags];
      keywords.splice(index, 1);
      this.config.keywords = keywords.join("、");
      this.$notify({
        title: "已移除关键词",
        message: "关键词已从列表中移除",
        type: "info",
        duration: 2000,
      });
    },

    // 更新关键词标签
    updateKeywordTags() {
      if (this.config.keywords) {
        this.keywordTags = this.config.keywords
          .split(/[,，、]/)
          .map((k) => k.trim())
          .filter((k) => k.length > 0);
      } else {
        this.keywordTags = [];
      }
    },

    // 初始化默认模板
    initDefaultTemplates() {
      this.defaultTemplates = [
        {
          id: "programming_basic",
          name: "编程基础知识",
          description: "覆盖编程语言基础概念、语法和常见算法的题库",
          keywords: "编程基础、算法、数据结构",
          structure: {
            single: 8,
            multiple: 5,
            truefalse: 3,
            fillblank: 2,
            shortanswer: 2,
          },
          difficulty: "medium",
        },
        {
          id: "web_development",
          name: "Web开发技术",
          description: "涵盖HTML、CSS、JavaScript以及前端框架的综合题库",
          keywords: "Web开发、HTML、CSS、JavaScript",
          structure: {
            single: 5,
            multiple: 5,
            truefalse: 3,
            fillblank: 3,
            shortanswer: 1,
          },
          difficulty: "medium",
        },
        {
          id: "database_fundamentals",
          name: "数据库基础",
          description: "关系型数据库原理、SQL语法及优化、数据库设计的综合题库",
          keywords: "数据库、SQL、MySQL",
          structure: {
            single: 6,
            multiple: 4,
            truefalse: 3,
            fillblank: 3,
            shortanswer: 2,
          },
          difficulty: "medium",
        },
        {
          id: "operating_system",
          name: "操作系统原理",
          description: "操作系统基本概念、进程管理、内存管理、文件系统等知识点",
          keywords: "操作系统、进程、内存管理",
          structure: {
            single: 7,
            multiple: 5,
            truefalse: 4,
            fillblank: 2,
            shortanswer: 2,
          },
          difficulty: "hard",
        },
        {
          id: "ai_machine_learning",
          name: "人工智能与机器学习",
          description:
            "人工智能基础理论、机器学习算法、深度学习和神经网络知识点",
          keywords: "人工智能、机器学习、深度学习、神经网络",
          structure: {
            single: 6,
            multiple: 6,
            truefalse: 3,
            fillblank: 2,
            shortanswer: 3,
          },
          difficulty: "hard",
        },
        {
          id: "network_security",
          name: "网络与信息安全",
          description: "网络协议、信息安全、加密算法、网络攻防技术等知识要点",
          keywords: "网络安全、密码学、网络协议、信息安全",
          structure: {
            single: 7,
            multiple: 5,
            truefalse: 4,
            fillblank: 2,
            shortanswer: 2,
          },
          difficulty: "medium",
        },
      ];

      // 初始时使用默认模板
      this.templates = [...this.defaultTemplates];
    },

    // 加载模板
    async loadTemplates() {
      // 检查本地存储中是否有模板
      const storedTemplates = localStorage.getItem('questionTemplates');
      const lastFetchTime = localStorage.getItem('templatesFetchTime');
      const currentTime = new Date().getTime();
      const oneDayInMs = 24 * 60 * 60 * 1000; // 一天的毫秒数
      
      // 如果有存储的模板，且距离上次获取不超过一天，且不是手动刷新，则使用本地存储的模板
      if (storedTemplates && lastFetchTime && 
          (currentTime - parseInt(lastFetchTime) < oneDayInMs) && 
          !this.isLoadingTemplates) {
        try {
          this.templates = JSON.parse(storedTemplates);
          this.templatesLoaded = true;
          console.log('从本地存储加载模板成功');
          return;
        } catch (error) {
          console.error('解析本地存储模板失败:', error);
          // 解析失败时继续从API获取
        }
      }

      // 显示加载状态
      this.isLoadingTemplates = true;
      this.thinkingText = "正在为您生成模板...";

      try {
        // 引入generateTemplates
        const { generateTemplates } = await import("@/api/generate");

        // 调用API生成模板
        const templates = await generateTemplates();

        // 更新模板
        if (templates && templates.length > 0) {
          this.templates = templates;
          
          // 存储到本地存储
          localStorage.setItem('questionTemplates', JSON.stringify(templates));
          localStorage.setItem('templatesFetchTime', currentTime.toString());
          
          this.$notify({
            title: "成功",
            message: "题库模板生成成功！",
            type: "success",
          });
        } else {
          // 如果没有返回模板，使用默认模板
          this.templates = [...this.defaultTemplates];
          this.$notify({
            title: "提示",
            message: "使用默认题库模板",
            type: "info",
          });
        }
      } catch (error) {
        console.error("加载模板失败:", error);

        // 使用默认模板
        this.templates = [...this.defaultTemplates];
        this.$notify({
          title: "提示",
          message: "模板生成失败，使用默认模板",
          type: "warning",
        });
      } finally {
        // 更新状态
        this.isLoadingTemplates = false;
        this.templatesLoaded = true;
      }
    },

    // 刷新模板
    refreshTemplates() {
      // 手动刷新模板，设置标志强制从API刷新
      this.isLoadingTemplates = true;
      this.loadTemplates();
    },

    // 关闭组件，触发close事件
    close() {
      // 检查是否有未采用的题目
      if (this.previewQuestions.length > 0 && !this.showConfirmDialog) {
        // 显示自定义确认对话框
        this.showConfirmDialog = true;
        this.confirmMessage =
          "您有未采用的题目，确定要关闭吗？未采用的题目将会丢失";
      } else if (!this.showConfirmDialog) {
        // 没有未采用题目，直接关闭
        this.resetAllConfig();
        this.$emit("close");
      }
    },
    // 取消关闭对话框
    cancelCloseDialog() {
      this.showConfirmDialog = false;
    },
    // 确认关闭对话框
    confirmCloseDialog() {
      this.showConfirmDialog = false;
      // 重置配置并关闭
      this.resetAllConfig();
      this.$emit("close");
    },
    // 切换全屏状态
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen;
    },
    // 上传文件方法
    uploadFile() {
      // 创建一个隐藏的文件输入元素
      const fileInput = document.createElement("input");
      fileInput.type = "file";
      fileInput.accept = ".txt,.pdf,.doc,.docx";

      // 监听文件选择事件
      fileInput.addEventListener("change", (event) => {
        const file = event.target.files[0];
        if (file) {
          // 这里可以处理上传的文件
          this.$notify({
            title: "成功",
            message: `文件 "${file.name}" 已选择，AI将基于此生成题目`,
            type: "success",
          });

          // 保存文件供后续AI生成使用
          this.referenceFile = file;
        }
      });

      // 触发文件选择对话框
      fileInput.click();
    },
    // 判断题型是否被选中
    isTypeSelected(type) {
      return this.config.questionTypes[type] > 0;
    },
    // 切换题型选择状态
    toggleQuestionType(type) {
      if (this.isTypeSelected(type)) {
        // 移除该题型配置
        this.$delete(this.config.questionTypes, type);
      } else {
        // 添加该题型配置，数量为1
        // 检查添加后是否会超过最大题目数量
        const currentTotal = this.totalQuestions;
        if (currentTotal + 1 <= this.maxTotalQuestions) {
          this.$set(this.config.questionTypes, type, 1);
        } else {
          // 如果添加会超过限制，显示提示
          this.$notify({
            title: "提示",
            message: `题目总数已达到上限(${this.maxTotalQuestions}题)，请减少其他题型数量后再选择`,
            type: "warning",
          });
        }
      }
    },
    // 增加题型数量
    incrementType(type) {
      // 检查增加后是否会超过最大题目数量
      const currentTotal = this.totalQuestions;
      if (currentTotal < this.maxTotalQuestions) {
        // 移除每种题型最多10题的限制，直接加1
        this.$set(
          this.config.questionTypes,
          type,
          this.config.questionTypes[type] + 1
        );
      } else {
        // 已达到最大题目数量，显示提示
        this.$notify({
          title: "提示",
          message: `题目总数已达到上限(${this.maxTotalQuestions}题)，请减少其他题型数量后再添加`,
          type: "warning",
        });
      }
    },
    // 减少题型数量
    decrementType(type) {
      if (this.config.questionTypes[type] > 1) {
        // 数量减1
        this.$set(
          this.config.questionTypes,
          type,
          this.config.questionTypes[type] - 1
        );
      } else {
        // 移除该题型配置
        this.$delete(this.config.questionTypes, type);
      }
    },
    // 获取题型描述
    getTypeDescription(type) {
      const descriptions = {
        single: "选择一个正确答案",
        multiple: "选择多个正确答案",
        truefalse: "判断陈述是否正确",
        fillblank: "填写空白处的答案",
      };
      return descriptions[type] || "";
    },
    // 获取题型名称
    getTypeName(type) {
      const map = {
        single: "单选",
        multiple: "多选",
        truefalse: "判断",
        fillblank: "填空",
        shortanswer: "简答",
        0: "单选",
        1: "多选",
        2: "填空",
        3: "判断",
        4: "简答",
      };
      return map[type] || type;
    },
    // 获取难度名称
    getDifficultyName(difficulty) {
      return this.difficultyOptions[difficulty] || difficulty;
    },
    // 获取难度样式
    getDifficultyStyle(difficulty) {
      return {
        // 根据难度设置背景颜色
        backgroundColor: this.difficultyColors[difficulty] || "#6B7280",
        // 文字颜色为白色
        color: "white",
      };
    },
    // 格式化答案
    formatAnswer(question) {
      if (!question || !question.correct_answer) return "";

      switch (question.type) {
        case "single":
          // 单选题显示 A.选项1
          const singleOptionIndex = question.correct_answer.charCodeAt(0) - 65; // A的ASCII码是65
          const singleOptions =
            typeof question.options === "string"
              ? question.options.split("\n")
              : [];
          return singleOptions[singleOptionIndex] || question.correct_answer;
        case "multiple":
          // 多选题显示 A.选项1,B.选项2
          const multiOptions =
            typeof question.options === "string"
              ? question.options.split("\n")
              : [];
          // 确保correct_answer是字符串，然后才能调用split
          const answers =
            typeof question.correct_answer === "string"
              ? question.correct_answer.split("")
              : [question.correct_answer.toString()];
          return answers
            .map((letter) => {
              const index = letter.charCodeAt(0) - 65;
              return multiOptions[index] || letter;
            })
            .join(",");
        case "truefalse":
          // 判断题显示 A.正确 或 B.错误
          return question.correct_answer === "A" ? "A.正确" : "B.错误";
        case "fillblank":
          // 填空题直接显示答案，多个答案用"或"拼接
          if (
            typeof question.correct_answer === "string" &&
            question.correct_answer.includes(",")
          ) {
            return question.correct_answer.split(",").join("或");
          } else {
            return question.correct_answer;
          }
        case "shortanswer":
          // 简答题不显示正确答案，只有解析
          return "参考解析";
        default:
          return question.correct_answer;
      }
    },
    // 判断选项是否为正确答案
    isCorrectAnswer(question, option) {
      if (!question || !question.correct_answer || !option) return false;

      // 从选项中提取选项字母 (如 "A.选项内容" => "A")
      const optionParts = option.split(".");
      if (!optionParts || optionParts.length < 1) return false;

      const optionLetter = optionParts[0];

      // 对于单选题和多选题，检查选项字母是否在正确答案中
      if (question.type === "single" || question.type === "multiple") {
        // 确保correct_answer是字符串
        if (typeof question.correct_answer !== "string") {
          return String(question.correct_answer) === optionLetter;
        }

        // 对于多选题，正确答案可能是多个字母连在一起，如"ABC"
        if (question.type === "multiple") {
          return question.correct_answer.includes(optionLetter);
        }

        // 对于单选题，正确答案是单个字母
        return question.correct_answer === optionLetter;
      }

      // 对于判断题，检查是否是正确的选项
      if (question.type === "truefalse") {
        if (optionLetter === "A" && question.correct_answer === "A")
          return true;
        if (optionLetter === "B" && question.correct_answer === "B")
          return true;
        return false;
      }

      return false;
    },
    // 获取预览题目中某题型的数量
    getPreviewCount(type) {
      return this.previewQuestions.filter((q) => q.type === type).length;
    },
    // 显示教程提示
    showTutorial() {
      alert(
        'AI题库生成器使用指南:\n\n1. 输入主题关键词\n2. 选择题目数量和难度\n3. 配置需要的题型和数量\n4. 点击"开始生成"按钮\n5. 预览并选择要保存的题目'
      );
    },
    // 开始生成题目
    async startGenerate() {
      if (!this.canGenerate || this.generating) return;

      // 验证题库配置
      if (!this.referenceFile && !this.config.keywords.trim()) {
        this.$notify({
          title: "提示",
          message: "请填写关键词或上传参考文件",
          type: "warning",
        });
        return;
      }

      // 清空题库名称，让AI根据关键词自动生成
      this.bankData.name = "";

      // 设置生成状态
      this.generating = true;
      this.progress = 0;
      this.error = null;

      // 清空预览列表
      this.previewQuestions = [];

      // 思考文本和进度条动画
      this.thinkingText = this.thinkingTexts[0];
      let textIndex = 0;
      let progressTimer = null;
      let aiDone = false;

      // 记录开始时间，确保至少显示最短思考时间
      const minThinkingMs = 2500; // 最短思考时间 2.5秒
      const startTime = Date.now();

      // 进度条动画
      progressTimer = setInterval(() => {
        if (this.progress < 100) {
          this.progress = Math.min(
            this.progress + Math.floor(Math.random() * 5) + 2,
            99
          );
          // 根据进度更新思考文本
          const step = Math.floor(
            (this.progress / 100) * this.thinkingTexts.length
          );
          textIndex = Math.min(step, this.thinkingTexts.length - 1);
          this.thinkingText = this.thinkingTexts[textIndex];
        }
      }, 400);

      // AI生成题目的主流程
      const aiPromise = (async () => {
        try {
          // 如果有上传文件，先读取文件内容
          if (this.referenceFile) {
            if (!this.fileContent) {
              this.fileContent = await this.readFileContent(this.referenceFile);
            }
          }

          // 准备配置数据
          const config = {
            // 如果有参考文件且没有手动设置关键词，则关键词留空让AI自动生成
            keywords:
              this.referenceFile && !this.config.keywords.trim()
                ? this.referenceFile.name.replace(/\.[^/.]+$/, "") // 使用文件名作为默认关键词
                : this.config.keywords,
            questionTypes: this.config.questionTypes,
            difficulty: this.config.difficulty,
            fileContent: this.fileContent,
          };

          // 准备题库基本信息，如果有参考文件则可以为空，由AI生成
          const bankDataForGeneration = {
            // 如果有参考文件且没有手动设置题库名称，则留空让AI自动生成
            name:
              this.referenceFile && !this.bankData.name.trim()
                ? ""
                : this.bankData.name,
            description: this.bankData.description,
          };

          // 使用新的 generateWithReference 函数
          try {
            const result = await generateWithReference(
              config,
              bankDataForGeneration
            );
            if (result && result.questions && result.questions.length > 0) {
              // 更新题库信息
              this.bankData.name =
                result.bankName ||
                this.bankData.name ||
                (this.referenceFile
                  ? `${this.referenceFile.name.replace(/\.[^/.]+$/, "")}题库`
                  : "");

              // 清理描述中的题目数量信息
              if (result.bankDescription) {
                let cleanDescription = result.bankDescription;
                // 移除包含题目数量的文本
                cleanDescription = cleanDescription.replace(
                  /[，,。.\s]*共\s*\d+\s*[道]?题[目]?.*$/g,
                  ""
                );
                cleanDescription = cleanDescription.replace(
                  /[，,。.\s]*包[含括]\s*\d+\s*[道]?题[目]?.*$/g,
                  ""
                );
                cleanDescription = cleanDescription.replace(
                  /[，,。.\s]*总计\s*\d+\s*[道]?题[目]?.*$/g,
                  ""
                );
                this.bankData.description = cleanDescription;
              }

              // 更新aiReturnBank
              this.aiReturnBank = result;

              console.log("result", result)

              // 提取题目用于预览
              this.previewQuestions = result.questions.map((q) => {
                // 前端和后端题型映射（数字 -> 前端名称）
                const typeMap = {
                  0: "single",
                  1: "multiple",
                  2: "fillblank",
                  3: "truefalse",
                  4: "shortanswer",
                };

                // 处理难度
                let difficulty;
                const diffValue = parseInt(q.difficulty);
                if (diffValue <= 3) difficulty = "easy";
                else if (diffValue <= 7) difficulty = "medium";
                else difficulty = "hard";

                // 处理选项格式
                let options = "";
                if (q.options) {
                  // 处理选项格式
                  if (q.type === 0 || q.type === 1) {
                    // 单选或多选
                    const optArray = q.options.split(",");
                    options = optArray
                      .map((opt, idx) => {
                        const letter = String.fromCharCode(65 + idx);
                        return `${letter}.${opt.trim()}`;
                      })
                      .join("\n");
                  } else if (q.type === 3) {
                    // 判断题
                    options = "A.正确\nB.错误";
                  }
                }

                // 处理答案格式
                let correctAnswer = q.answer || "";
                if (q.type === 0) {
                  // 单选题
                  // 查找选项索引
                  const optArray = q.options.split(",");
                  const answerIndex = optArray.findIndex(
                    (opt) => opt.trim() === q.answer.trim()
                  );
                  if (answerIndex !== -1) {
                    correctAnswer = String.fromCharCode(65 + answerIndex);
                  }
                } else if (q.type === 1) {
                  // 多选题
                  const optArray = q.options.split(",");
                  const answers = q.answer.split(",");
                  correctAnswer = answers
                    .map((ans) => {
                      const answerIndex = optArray.findIndex(
                        (opt) => opt.trim() === ans.trim()
                      );
                      return answerIndex !== -1
                        ? String.fromCharCode(65 + answerIndex)
                        : "";
                    })
                    .filter(Boolean)
                    .join("");
                } else if (q.type === 3) {
                  // 判断题
                  correctAnswer = q.answer.trim() === "正确" ? "A" : "B";
                }

                return {
                  question_id: `gen-${Date.now()}-${Math.floor(
                    Math.random() * 1000
                  )}`,
                  bank_id: this.bankId,
                  type: typeMap[q.type] || "single",
                  content: q.content,
                  options: options,
                  correct_answer: correctAnswer,
                  parse: q.parse || "",
                  difficulty: difficulty,
                  generated: true,
                };
              });

              // 提示成功
              this.$notify({
                title: "成功",
                message: `成功生成${this.previewQuestions.length}道题目！`,
                type: "success",
              });

              // 重新获取题库列表以更新难度
              this.fetchBanks();
            } else {
              throw new Error("未获取到有效题目数据");
            }
          } catch (apiError) {
            console.error("AI生成题目失败:", apiError);
            this.error = "生成过程中出现错误，请重试";
            // 如果失败，尝试使用旧的方法生成模拟题目
            this.generateMockQuestions();
          }
        } catch (error) {
          console.error(error);
          this.error = "生成过程中出现错误，请重试";

          // 提示错误
          this.$notify({
            title: "错误",
            message: this.error,
            type: "error",
          });
        }

        // 标记AI生成已完成
        aiDone = true;
      })();

      // AI和最短思考时间并行
      await Promise.all([
        aiPromise,
        new Promise((resolve) => setTimeout(resolve, minThinkingMs)),
      ]);

      // 如果进度条还没到100%，补足动画
      if (this.progress < 100) {
        await new Promise((resolve) => {
          const timer = setInterval(() => {
            if (this.progress < 100) {
              this.progress = Math.min(this.progress + 8, 100);
            }
            if (this.progress >= 100) {
              clearInterval(timer);
              resolve();
            }
          }, 60);
        });
      }

      // 清理定时器
      clearInterval(progressTimer);

      // 停止在最后一个思考状态
      this.thinkingText = this.thinkingTexts[this.thinkingTexts.length - 1];
      this.progress = 100;

      // 生成完成
      this.generating = false;
    },

    // 生成模拟题目（当API调用失败时使用）
    generateMockQuestions() {
      // 清空现有预览题目
      this.previewQuestions = [];

      // 为每个题型生成预定数量的题目
      Object.entries(this.config.questionTypes).forEach(([type, count]) => {
        for (let i = 0; i < count; i++) {
          this.previewQuestions.push(this.generateQuestion(type));
        }
      });
    },
    // 读取文件内容
    async readFileContent(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = (event) => {
          resolve(event.target.result);
        };

        reader.onerror = (error) => {
          reject(error);
        };

        // 检查文件类型并相应地读取
        if (file.type === "application/pdf") {
          // 对于PDF文件，我们只能获取二进制数据
          // 实际应用中可能需要使用PDF解析库
          reader.readAsArrayBuffer(file);
        } else {
          // 对于文本文件，直接读取文本内容
          reader.readAsText(file);
        }
      });
    },
    // 生成题目批次
    generateQuestionsBatch(forceComplete = false) {
      // 筛选出还需要生成的题型
      const typesToGenerate = Object.entries(this.config.questionTypes).filter(
        ([type, count]) => {
          const generatedCount = this.previewQuestions.filter(
            (q) => q.type === type
          ).length;
          return generatedCount < count;
        }
      );

      if (typesToGenerate.length === 0) return;

      // 每次生成1 - 3道题，forceComplete为true时生成所有剩余题目
      const batchSize = forceComplete
        ? typesToGenerate.length
        : Math.min(3, typesToGenerate.length);

      // 如果有参考文件，使用文件内容来辅助生成题目
      if (this.referenceFile && this.fileContent) {
        // 获取文件内容的摘要用于生成题目
        const contentSummary = this.getContentSummary(this.fileContent);

        for (let i = 0; i < batchSize; i++) {
          const [type, count] = typesToGenerate[i];
          const generatedCount = this.previewQuestions.filter(
            (q) => q.type === type
          ).length;

          if (generatedCount < count) {
            // 生成一道基于文件内容的题目
            this.previewQuestions.push(
              this.generateSmartQuestion(type, contentSummary)
            );
          }
        }
      } else {
        // 原有逻辑，不基于文件内容生成题目
        for (let i = 0; i < batchSize; i++) {
          const [type, count] = typesToGenerate[i];
          const generatedCount = this.previewQuestions.filter(
            (q) => q.type === type
          ).length;

          if (generatedCount < count) {
            // 生成一道题目并添加到预览列表
            this.previewQuestions.push(this.generateQuestion(type));
          }
        }
      }
    },

    // 获取文件内容摘要
    getContentSummary(content) {
      // 根据文件内容大小，获取一个合适的摘要
      // 这里简单实现，实际应用中可能需要更复杂的摘要生成算法
      if (!content) return "";

      let summary = "";
      if (typeof content === "string") {
        // 文本文件，提取前1000个字符作为摘要
        summary = content.substring(0, 1000);

        // 如果文本太长，在末尾添加省略号
        if (content.length > 1000) {
          summary += "...";
        }
      } else {
        // 二进制文件（如PDF），返回标识
        summary = "[二进制文件内容]";
      }

      return summary;
    },

    // 基于文件内容生成智能题目
    generateSmartQuestion(type, contentSummary) {
      // 生成唯一的题目ID
      const questionId = `gen-${Date.now()}-${Math.floor(
        Math.random() * 1000
      )}`;

      // 基于文件内容生成题目描述
      const description = this.generateQuestionContent(type);

      // 基础题目信息
      const baseQuestion = {
        question_id: questionId,
        bank_id: this.bankId,
        content: description,
        type,
        difficulty: this.config.difficulty,
        style: this.config.style,
        generated: true,
        // 添加文件名信息
        file_reference: this.referenceFile ? this.referenceFile.name : null,
      };

      // 根据不同题型生成不同内容
      switch (type) {
        case "single":
          return {
            ...baseQuestion,
            // 生成4个与文件内容相关的选项
            options: this.generateContentBasedOptions(4, contentSummary),
            // 随机选择一个正确答案
            correct_answer: ["A", "B", "C", "D"][Math.floor(Math.random() * 4)],
            // 答案解析
            parse: `本题基于上传的《${this.referenceFile.name}》内容，正确答案解析...`,
          };
        case "multiple":
          const correctCount = Math.min(3, 2 + Math.floor(Math.random() * 2));
          const correctAnswers = ["A", "B", "C", "D"]
            .sort(() => 0.5 - Math.random())
            .slice(0, correctCount)
            .join("");

          return {
            ...baseQuestion,
            // 生成4个与文件内容相关的选项
            options: this.generateContentBasedOptions(4, contentSummary),
            // 随机选择多个正确答案
            correct_answer: correctAnswers,
            // 答案解析
            parse: `本题基于上传的《${this.referenceFile.name}》内容，正确答案解析...`,
          };
        case "truefalse":
          return {
            ...baseQuestion,
            // 选项为正确和错误
            options: "A.正确\nB.错误",
            // 随机选择正确或错误
            correct_answer: Math.random() > 0.5 ? "A" : "B",
            // 答案解析
            parse: `本题基于上传的《${this.referenceFile.name}》内容，正确答案解析...`,
          };
        case "fillblank":
          return {
            ...baseQuestion,
            // 正确答案，基于文件内容
            correct_answer: "文件中的关键概念",
            // 答案解析
            parse: `本题基于上传的《${this.referenceFile.name}》内容，正确答案解析...`,
          };
        default:
          return baseQuestion;
      }
    },

    // 生成基于内容的选项
    generateContentBasedOptions(count, contentSummary) {
      const options = [];
      const contentKeywords = this.extractKeywords(contentSummary);

      for (let i = 0; i < count; i++) {
        const letter = String.fromCharCode(65 + i);
        // 使用文件内容中的关键词生成更相关的选项
        options.push(
          `${letter}.${this.generateContentBasedOption(contentKeywords)}`
        );
      }

      return options.join("\n");
    },

    // 从内容中提取关键词
    extractKeywords(content) {
      // 简单实现，实际应用可能需要更复杂的文本分析
      if (!content || typeof content !== "string") return [];

      // 去除标点符号，分词并去除常见停用词
      const stopWords = [
        "的",
        "了",
        "是",
        "在",
        "和",
        "与",
        "the",
        "a",
        "an",
        "of",
        "to",
        "and",
        "in",
      ];
      const words = content
        .replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "")
        .split(/\s+/)
        .filter(
          (word) => word.length > 1 && !stopWords.includes(word.toLowerCase())
        );

      // 对词频进行统计
      const wordFreq = {};
      words.forEach((word) => {
        wordFreq[word] = (wordFreq[word] || 0) + 1;
      });

      // 排序并返回前20个关键词
      return Object.entries(wordFreq)
        .sort((a, b) => b[1] - a[1])
        .slice(0, 20)
        .map((entry) => entry[0]);
    },

    // 生成基于内容关键词的选项
    generateContentBasedOption(keywords) {
      // 如果有关键词，随机使用一个关键词
      if (keywords && keywords.length > 0) {
        const keyword = keywords[Math.floor(Math.random() * keywords.length)];

        const templates = [
          `关于${keyword}的描述`,
          `${keyword}的特点`,
          `${keyword}的应用`,
          `${keyword}的定义`,
        ];

        return templates[Math.floor(Math.random() * templates.length)];
      }

      // 如果没有提取到关键词，使用默认选项
      return this.generateOptionText();
    },

    // 生成一道题目
    generateQuestion(type) {
      // 生成唯一的题目ID
      const questionId = `gen-${Date.now()}-${Math.floor(
        Math.random() * 1000
      )}`;
      // 基础题目信息
      const baseQuestion = {
        question_id: questionId,
        bank_id: this.bankId,
        content: this.generateQuestionContent(type),
        type,
        difficulty: this.config.difficulty,
        style: this.config.style,
        generated: true,
      };

      switch (type) {
        case "single":
          return {
            ...baseQuestion,
            // 生成4个选项
            options: this.generateOptions(4),
            // 随机选择一个正确答案
            correct_answer: ["A", "B", "C", "D"][Math.floor(Math.random() * 4)],
            // 答案解析
            parse: "这是单选题的答案解析...",
          };
        case "multiple":
          const correctCount = Math.min(3, 2 + Math.floor(Math.random() * 2));
          const correctAnswers = ["A", "B", "C", "D"]
            .sort(() => 0.5 - Math.random())
            .slice(0, correctCount)
            .join("");

          return {
            ...baseQuestion,
            // 生成4个选项
            options: this.generateOptions(4),
            // 随机选择多个正确答案
            correct_answer: correctAnswers,
            // 答案解析
            parse: "这是多选题的答案解析...",
          };
        case "truefalse":
          return {
            ...baseQuestion,
            // 选项为正确和错误
            options: "A.正确\nB.错误",
            // 随机选择正确或错误
            correct_answer: Math.random() > 0.5 ? "A" : "B",
            // 答案解析
            parse: "这是判断题的答案解析...",
          };
        case "fillblank":
          return {
            ...baseQuestion,
            // 正确答案
            correct_answer: "正确答案",
            // 答案解析
            parse: "这是填空题的答案解析...",
          };
      }
    },

    // 生成题目内容
    generateQuestionContent(type) {
      // 定义一个关键词变量
      const keyword = this.config.keywords || "编程知识";

      // 如果有参考文件则使用文件内容相关的题目
      if (this.referenceFile) {
        const typeMap = {
          single: [
            `根据上传的文件内容，哪一项描述是正确的？`,
            `关于上传文件中的内容，以下哪种说法是最准确的？`,
            `根据文件中的材料，下列说法错误的是？`,
          ],
          multiple: [
            `根据上传的文件内容，以下哪些说法是正确的？`,
            `文件材料中提到的关键点包括哪些？`,
            `根据文件内容，以下哪些选项是正确的？`,
          ],
          truefalse: [
            `${keyword}是一种重要的技术理念。`,
            `${keyword}能有效解决特定领域问题。`,
            `${keyword}对系统性能有积极影响。`,
          ],
          fillblank: [
            `请填写以下空缺的部分: ____`,
            `文件中提到的这个关键概念是: ____`,
            `完成文件中提到的这句话: ____`,
          ],
          shortanswer: [
            `请根据文件内容，简述${keyword}的主要特点。`,
            `根据文件材料，分析${keyword}的应用场景。`,
            `请简要说明文件中${keyword}的核心概念。`,
          ],
        };

        const options = typeMap[type] || typeMap.single;
        return options[Math.floor(Math.random() * options.length)];
      }

      // 无参考文件时使用关键词
      const typeMap = {
        single: [
          `关于${keyword}的描述中，哪一项是正确的？`,
          `在${keyword}中，以下哪种做法是最佳实践？`,
          `关于${keyword}的实现方式，以下说法错误的是？`,
        ],
        multiple: [
          `关于${keyword}，以下哪些说法是正确的？`,
          `在${keyword}场景中，以下哪些做法是合适的？`,
          `以下哪些选项描述了${keyword}的正确特性？`,
        ],
        truefalse: [
          `判断: ${keyword}的描述是否正确？`,
          `以下关于${keyword}的说法是否正确？`,
          `判断正误: ${keyword}`,
        ],
        fillblank: [
          `请填写${keyword}中的空白处: ____`,
          `在${keyword}中，缺失的部分是: ____`,
          `完成${keyword}的表述: ____`,
        ],
        shortanswer: [
          `请简述${keyword}的主要特点。`,
          `分析${keyword}的应用场景。`,
          `简要说明${keyword}的核心概念。`,
        ],
      };

      const options = typeMap[type] || typeMap.single;
      return options[Math.floor(Math.random() * options.length)];
    },

    // 生成选项
    generateOptions(count) {
      const options = [];
      for (let i = 0; i < count; i++) {
        const letter = String.fromCharCode(65 + i);
        options.push(`${letter}.${this.generateOptionText()}`);
      }
      return options.join("\n");
    },

    // 生成选项文本
    generateOptionText() {
      const texts = [
        "正确选项描述",
        "常见错误描述",
        "部分正确但不完全",
        "完全错误的描述",
      ];
      return texts[Math.floor(Math.random() * texts.length)];
    },

    // 移除了接受单个题目的方法

    // 接受所有题目
    async acceptAllQuestions() {
      // 验证题库名称是否填写
      if (!this.bankData.name.trim()) {
        this.$notify({
          title: "提示",
          message: "请填写题库名称",
          type: "warning",
        });
        return;
      }

      // 提示确认
      try {
        const result = await this.$confirm(
          `确定要将所有${this.previewQuestions.length}道题目添加到题库吗？`,
          "确认操作",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "info",
          }
        );

        // 用户确认后处理所有题目
        this.$notify({
          title: "处理中",
          message: "正在创建题库，请稍候...",
          type: "info",
          duration: 2000,
        });

        try {
          // 处理所有题目
          const processedQuestions = this.previewQuestions.map((q) => {
            // 处理选项
            const optionsKV =
              q.options && q.options.includes("\n")
                ? q.options.split("\n").map((item) => {
                    return {
                      key: item.substring(0, 1),
                      value: item.substring(2).trim(),
                    };
                  })
                : [];

            // 拆分答案
            let correctAnswer = Array.isArray(q.correct_answer)
              ? q.correct_answer
              : q.correct_answer.split("");

            // 获取答案内容
            let answer =
              optionsKV.length > 0
                ? optionsKV
                    .filter((item) => correctAnswer.includes(item.key))
                    .map((item) => item.value)
                    .join(",")
                : q.correct_answer;

            // 获取选项内容
            let options = optionsKV.map((item) => item.value).join(",");

            // 处理填空题
            if (q.type === "fillblank") {
              answer = q.correct_answer;
              options = "";
            }

            return {
              content: q.content,
              options,
              correctAnswer: answer,
              parse: q.parse,
              type: this.mapTypeToNumber(q.type),
              difficulty: this.mapDifficultyToNumber(q.difficulty),
            };
          });

          // 直接创建题库并添加所有题目
          const bankData = {
            bank: {
              bankName: this.bankData.name,
              description: this.bankData.description,
              totalQuestionNum: 0, // 必须设置，否则后端接收为0
            },
            questions: processedQuestions,
          };

          // 调用后端接口创建题库并添加所有题目 - 只做这一次调用！
          console.log("发送到服务器的题目数量:", processedQuestions.length);

          const response = await addBankVzQuestion(bankData);
          console.log("服务器响应:", response);

          // 检查响应是否有效
          if (!response || !response.data || !response.data.data) {
            throw new Error("API响应无效");
          }

          // 保存创建的题库ID
          this.createdBankId = response.data.data;

          // 更新aiReturnBank信息
          this.aiReturnBank.bankName = this.bankData.name;
          this.aiReturnBank.bankDescription = this.bankData.description;

          // FIXME: 使用服务器返回的题库信息，完全不要在前端计算题目数量
          const returnedBankInfo = response.data.data;
          
          console.log("题库信息:", returnedBankInfo);

          // 构建完整的题库对象 - 强制使用processedQuestions.length作为题目数量
          const newBank = {
            bankId: this.createdBankId,
            bankName: this.bankData.name,
            description: this.bankData.description,
            totalQuestionNum: processedQuestions.length, // 正确设置题目数量 - 确保和后端返回一致
            avgDiffculty: this.mapDifficultyToNumber(this.config.difficulty),
            createTime: new Date().toISOString(),
          };
          console.log("添加到store的题库信息, 题目数量:", newBank);

          // 添加题库到store - 这是唯一的一次更新题库的操作
          this.addBankToStore(newBank);

          // 设置为当前题库，使BankCard显示此题库
          this.$store.commit("question/SET_CURRENT_BANK", newBank);

          // 添加题目到store - 只设置题目列表，不更新题库数量
          const formattedQuestions = processedQuestions.map((question) => ({
            questionId: question.questionId,
            bankId: this.createdBankId,
            content: question.content,
            options: question.options,
            correctAnswer: question.answer,
            parse: question.parse,
            type: question.type,
            difficulty: question.difficulty,
          }));
          // 关键：同步新题库的题目到Vuex
          this.$store.commit("question/SET_QUESTIONS", {
            questions: formattedQuestions,
            totalItems: formattedQuestions.length,
          });

          this.$notify({
            title: "成功",
            message: `题库"${this.bankData.name}"创建成功，已添加${processedQuestions.length}道题目`,
            type: "success",
            duration: 3000,
          });

          // 清空预览列表
          this.previewQuestions = [];
          // 提示用户是否关闭窗口
          this.$confirm("所有题目已处理完毕，是否关闭生成窗口?", "提示", {
            confirmButtonText: "关闭",
            cancelButtonText: "继续生成",
            type: "info",
          })
            .then(() => {
              // 发送完成事件
              this.$emit("complete");
              this.close();
            })
            .catch(() => {
              // 用户选择继续生成
            });
        } catch (error) {
          console.error("批量处理题目失败:", error);
          this.$notify({
            title: "错误",
            message: `操作失败: ${error.message || "未知错误"}`,
            type: "error",
            duration: 4000,
          });
        }
      } catch (e) {
        // 用户取消操作
        console.log("用户取消了批量添加操作");
      }
    },
    // 拒绝题目
    rejectQuestion(index) {
      // 从预览列表中移除指定索引的题目
      this.previewQuestions.splice(index, 1);

      // 如果删除后没有题目了，提示用户可以继续生成
      if (this.previewQuestions.length === 0) {
        this.$notify({
          title: "提示",
          message: "已删除所有题目，可以继续生成",
          type: "info",
          duration: 2000,
        });
      }
    },
    // 从预览列表中移除指定索引的题目
    removePreviewQuestion(index) {
      // 从预览列表中移除指定索引的题目
      this.previewQuestions.splice(index, 1);
    },
    // 开始思考文本切换
    startThinkingTextInterval() {
      // 不再需要，由新的动态进度条替代
      // 保留方法以避免引用错误
    },
    // 停止思考文本切换
    stopThinkingTextInterval() {
      // 不再需要，由新的动态进度条替代
      // 保留方法以避免引用错误
    },
    // 移除上传的文件
    removeFile() {
      this.referenceFile = null;
      this.$notify({
        title: "提示",
        message: "参考文件已移除",
        type: "info",
      });
    },

    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes < 1024) return bytes + " B";
      else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + " KB";
      else return (bytes / 1048576).toFixed(1) + " MB";
    },

    // 显示模板选择器
    showTemplates() {
      this.showTemplateSelector = true;
      this.showQuickCreatePanel = false;
    },

    // 选择模板
    selectTemplate(template) {
      this.selectedTemplate = template.id;

      // 预填充题库名称和描述
      this.bankData.name = template.name;
      this.bankData.description = template.description;

      // 更新题型配置
      this.config.questionTypes = { ...template.structure };

      // 更新关键词
      this.config.keywords = template.keywords;

      // 更新难度
      this.config.difficulty = template.difficulty;
    },

    // 应用模板
    applyTemplate() {
      if (!this.selectedTemplate) return;

      // 首先重置所有配置，确保干净开始
      this.resetAllConfig();

      // 隐藏模板选择器
      this.showTemplateSelector = false;

      // 从所选模板获取配置
      const selectedTemplateObj = this.templates.find(
        (t) => t.id === this.selectedTemplate
      );
      if (selectedTemplateObj) {
        // 更新一键创建选项
        this.quickCreateOptions.questionCount = Object.values(
          selectedTemplateObj.structure
        ).reduce((a, b) => a + b, 0);
        this.quickCreateOptions.difficultyBias =
          selectedTemplateObj.difficulty || "medium";
        this.quickCreateOptions.preferredTypes = Object.keys(
          selectedTemplateObj.structure
        ).filter((type) => selectedTemplateObj.structure[type] > 0);

        // 设置关键词
        this.config.keywords = selectedTemplateObj.keywords || "";
      }

      // 开始一键智能创建过程
      this.startQuickCreate();
    },

    // 显示一键创建面板
    showQuickCreate() {
      this.showQuickCreatePanel = true;
      this.showTemplateSelector = false;
    },

    // 开始一键创建
    async startQuickCreate() {
      if (!this.config.keywords && !this.referenceFile) {
        this.$notify({
          title: "提示",
          message: "请输入主题关键词或上传参考文件",
          type: "warning",
        });
        return;
      }

      // 由API自动生成题库名称，不要添加硬编码的名称
      // 清空题库名称，让AI生成
      this.bankData.name = "";

      // 设置生成状态
      this.generating = true;
      this.progress = 0;
      this.error = null;

      // 清空预览列表
      this.previewQuestions = [];

      // 隐藏一键创建面板 - 自动关闭一键智能创建
      this.showQuickCreatePanel = false;

      // 思考文本和进度条动画
      this.thinkingText = this.thinkingTexts[0];
      let textIndex = 0;
      let progressTimer = null;
      let aiDone = false;

      // 记录开始时间，确保至少显示最短思考时间
      const minThinkingMs = 2500; // 最短思考时间 2.5秒
      const startTime = Date.now();

      // 进度条动画
      progressTimer = setInterval(() => {
        if (this.progress < 100) {
          this.progress = Math.min(
            this.progress + Math.floor(Math.random() * 5) + 2,
            99
          );
          // 根据进度更新思考文本
          const step = Math.floor(
            (this.progress / 100) * this.thinkingTexts.length
          );
          textIndex = Math.min(step, this.thinkingTexts.length - 1);
          this.thinkingText = this.thinkingTexts[textIndex];
        }
      }, 400);

      // 准备一键生成选项
      const quickOptions = {
        keywords: this.config.keywords,
        questionCount: this.quickCreateOptions.questionCount,
        difficultyBias: this.quickCreateOptions.difficultyBias,
        preferredTypes: this.quickCreateOptions.preferredTypes,
      };

      // 如果有参考文件，则读取文件内容
      if (this.referenceFile && !this.fileContent) {
        this.fileContent = await this.readFileContent(this.referenceFile);
      }

      // 如果有参考文件，将文件内容添加到选项中
      if (this.referenceFile && this.fileContent) {
        quickOptions.fileContent = this.fileContent;
      }

      // AI生成题库的主流程
      const aiPromise = (async () => {
        try {
          // 调用一键生成API
          const result = await quickGenerateBank(quickOptions);

          // 如果获得了结果
          if (result && result.questions && result.questions.length > 0) {
            // 更新题库信息，确保描述中不包含题目数量
            this.bankData.name = result.bankName || this.bankData.name;

            // 清理描述中的题目数量信息
            if (result.bankDescription) {
              let cleanDescription = result.bankDescription;
              // 移除包含题目数量的文本
              cleanDescription = cleanDescription.replace(
                /[，,。.\s]*共\s*\d+\s*[道]?题[目]?.*$/g,
                ""
              );
              cleanDescription = cleanDescription.replace(
                /[，,。.\s]*包[含括]\s*\d+\s*[道]?题[目]?.*$/g,
                ""
              );
              cleanDescription = cleanDescription.replace(
                /[，,。.\s]*总计\s*\d+\s*[道]?题[目]?.*$/g,
                ""
              );
              this.bankData.description = cleanDescription;
            }

            // 更新aiReturnBank
            this.aiReturnBank = result;

            // 提取题目用于预览
            this.previewQuestions = result.questions.map((q) => {
              console.log("02",q);
              
              // 前端和后端题型映射（数字 -> 前端名称）
              const typeMap = {
                0: "single",
                1: "multiple",
                2: "fillblank",
                3: "truefalse",
                4: "shortanswer",
              };

              // 处理难度
              let difficulty;
              const diffValue = parseInt(q.difficulty);
              if (diffValue <= 3) difficulty = "easy";
              else if (diffValue <= 7) difficulty = "medium";
              else difficulty = "hard";

              // 处理选项格式
              let options = "";


              if (q.options) {
                // 处理选项格式
                if (q.type === 0 || q.type === 1) {
                  // 单选或多选
                  const optArray = q.options.split(",");
                  options = optArray
                    .map((opt, idx) => {
                      const letter = String.fromCharCode(65 + idx);
                      console.log("4",`${letter}.${opt.trim()}`); 
                      return `${letter}.${opt.trim()}`;
                    }).join("\n");
                } else if (q.type === 3) {
                  // 判断题
                  options = "A.正确\nB.错误";
                }
              }

              // 处理答案格式
              let correctAnswer = q.answer || "";
              if (q.type === 0) {
                // 单选题
                // 查找选项索引
                console.log("q1",q);
                
                const optArray = q.options.split(",");
                console.log("q2",optArray);
                const answerIndex = optArray.findIndex(
                  (opt) => opt.trim() === q.answer.trim()
                );
                console.log("q3",q);
                if (answerIndex !== -1) {
                  correctAnswer = String.fromCharCode(65 + answerIndex);
                }
                console.log("q4",q);
              } else if (q.type === 1) {
                // 多选题
                const optArray = q.options.split(",");
                const answers = q.answer.split(",");
                correctAnswer = answers
                  .map((ans) => {
                    const answerIndex = optArray.findIndex(
                      (opt) => opt.trim() === ans.trim()
                    );
                    return answerIndex !== -1
                      ? String.fromCharCode(65 + answerIndex)
                      : "";
                  })
                  .filter(Boolean)
                  .join("");
              } else if (q.type === 3) {
                // 判断题
                correctAnswer = q.answer.trim() === "正确" ? "A" : "B";
              }

              console.log("1",{
                question_id: `gen-${Date.now()}-${Math.floor(
                  Math.random() * 1000
                )}`,
                bank_id: this.bankId,
                type: typeMap[q.type] || "single",
                content: q.content,
                options: options,
                correct_answer: correctAnswer,
                parse: q.parse || "",
                difficulty: difficulty,
                generated: true,
              });
              
              return {
                question_id: `gen-${Date.now()}-${Math.floor(
                  Math.random() * 1000
                )}`,
                bank_id: this.bankId,
                type: typeMap[q.type] || "single",
                content: q.content,
                options: options,
                correct_answer: correctAnswer,
                parse: q.parse || "",
                difficulty: difficulty,
                generated: true,
              };
            });

            console.log("this.previewQuestions", this.previewQuestions);
            

            // 更新题型配置以匹配生成结果
            this.updateQuestionTypeCounts();

            // 成功通知
            this.$notify({
              title: "成功",
              message: `成功生成${this.previewQuestions.length}道题目！`,
              type: "success",
            });

            // 重新获取题库列表以更新难度
            this.fetchBanks();
          } else {
            throw new Error("未获取到有效题目数据");
          }
        } catch (error) {
          console.error("一键生成失败:", error);
          this.error = "一键生成过程中出现错误，请重试";

          // 错误通知
          this.$notify({
            title: "错误",
            message: this.error,
            type: "error",
          });

          // 使用旧的方法作为备选
          this.distributeQuestions();
        }
      })();

      // AI和最短思考时间并行
      await Promise.all([
        aiPromise,
        new Promise((resolve) => setTimeout(resolve, minThinkingMs)),
      ]);

      // 如果进度条还没到100%，补足动画
      if (this.progress < 100) {
        await new Promise((resolve) => {
          const timer = setInterval(() => {
            if (this.progress < 100) {
              this.progress = Math.min(this.progress + 8, 100);
            }
            if (this.progress >= 100) {
              clearInterval(timer);
              resolve();
            }
          }, 60);
        });
      }

      // 清理定时器
      clearInterval(progressTimer);

      // 停止在最后一个思考状态
      this.thinkingText = this.thinkingTexts[this.thinkingTexts.length - 1];
      this.progress = 100;

      // 生成完成
      this.generating = false;
    },

    // 根据预览题目更新题型配置数量
    updateQuestionTypeCounts() {
      // 计算每种题型的数量
      const typeCounts = {};
      this.questionTypes.forEach((type) => {
        typeCounts[type.value] = 0;
      });

      // 统计预览中的题型数量
      this.previewQuestions.forEach((q) => {
        if (typeCounts[q.type] !== undefined) {
          typeCounts[q.type]++;
        }
      });

      // 更新配置中的题型数量
      Object.keys(typeCounts).forEach((type) => {
        this.$set(this.config.questionTypes, type, typeCounts[type]);
      });
    },

    // 根据用户选择分配题目数量到各题型
    distributeQuestions() {
      const { questionCount, preferredTypes } = this.quickCreateOptions;

      // 确保有选中的题型
      if (preferredTypes.length === 0) {
        preferredTypes.push("single");
      }

      // 重置现有题型配置
      const newQuestionTypes = {};
      Object.keys(this.config.questionTypes).forEach((type) => {
        newQuestionTypes[type] = 0;
      });

      // 平均分配题目
      const baseCount = Math.floor(questionCount / preferredTypes.length);
      let remaining = questionCount - baseCount * preferredTypes.length;

      preferredTypes.forEach((type) => {
        newQuestionTypes[type] = baseCount;
        // 分配剩余的题目
        if (remaining > 0) {
          newQuestionTypes[type]++;
          remaining--;
        }
      });

      // 更新题型配置
      this.config.questionTypes = newQuestionTypes;
    },

    // 将前端题型转换为后端数字类型
    mapTypeToNumber(type) {
      const typeMap = {
        single: 0,
        multiple: 1,
        fillblank: 2,
        truefalse: 3,
        shortanswer: 4,
      };
      return typeMap[type] !== undefined ? typeMap[type] : 0;
    },

    // 将前端难度转换为后端难度数字
    mapDifficultyToNumber(difficulty) {
      const difficultyMap = {
        easy: 2, // 简单取中间值2
        medium: 5, // 中等取中间值5
        hard: 8, // 困难取中间值8
      };
      return difficultyMap[difficulty] !== undefined
        ? difficultyMap[difficulty]
        : 5;
    },

    // 处理题目为后端格式
    processQuestionsForBackend(questions) {
      return questions.map((q) => ({
        ...q,
        type: this.mapTypeToNumber(q.type),
        difficulty: this.mapDifficultyToNumber(q.difficulty),
      }));
    },

    // 处理题目为预览格式（前端显示格式）
    processQuestionsForPreview(questions) {
      return questions.map((q) => {
        // 生成唯一ID
        const questionId = `gen-${Date.now()}-${Math.floor(
          Math.random() * 1000
        )}`;

        return {
          question_id: questionId,
          bank_id: this.bankId,
          type: q.type,
          content: q.content,
          options: q.options,
          correct_answer: q.correct_answer,
          parse: q.parse,
          difficulty: this.config.difficulty,
          generated: true,
        };
      });
    },
    // 切换题型选择状态
    togglePreferredType(type) {
      if (this.quickCreateOptions.preferredTypes.includes(type)) {
        this.quickCreateOptions.preferredTypes =
          this.quickCreateOptions.preferredTypes.filter((t) => t !== type);
      } else {
        this.quickCreateOptions.preferredTypes.push(type);
      }
    },
    // 获取选中的题型名称
    getSelectedTypeNames() {
      return this.questionTypes
        .filter((type) =>
          this.quickCreateOptions.preferredTypes.includes(type.value)
        )
        .map((type) => type.label)
        .join(", ");
    },
    // 重新生成题目
    regenerateQuestion(question, index) {
      // 设置局部生成状态
      const originalQuestion = { ...question };

      // 设置重新生成标志
      this.$set(this.previewQuestions[index], "regenerating", true);

      // 提示正在重新生成
      this.$notify({
        title: "提示",
        message: "正在重新生成题目...",
        type: "info",
      });

      // 尝试通过AI生成更好的题目
      this.regenerateQuestionWithAI(originalQuestion, index);
    },

    // 使用AI重新生成单个题目
    async regenerateQuestionWithAI(originalQuestion, index) {
      try {
        // 设置局部加载状态
        const loadingQuestion = {
          ...originalQuestion,
          content: "正在重新生成题目...",
          regenerating: true,
        };
        this.$set(this.previewQuestions, index, loadingQuestion);

        // 检查是否有参考文件
        const hasReferenceFile = !!this.referenceFile && !!this.fileContent;

        // 准备配置数据
        const config = {
          keywords: this.config.keywords,
          difficulty: originalQuestion.difficulty,
          type: originalQuestion.type,
          // 仅当有参考文件时提供文件内容
          fileContent: hasReferenceFile ? this.fileContent : undefined,
        };

        // 调用专门的重新生成API
        try {
          const newQuestionData = await regenerateQuestion(config);

          if (newQuestionData) {
            // 类型映射（数字 -> 前端名称）
            const typeMap = {
              0: "single",
              1: "multiple",
              2: "fillblank",
              3: "truefalse",
              4: "shortanswer",
            };

            // 难度映射（数字 -> 前端名称）
            let difficulty;
            const diffValue = parseInt(newQuestionData.difficulty);
            if (diffValue <= 3) difficulty = "easy";
            else if (diffValue <= 7) difficulty = "medium";
            else difficulty = "hard";

            // 确保选项格式正确
            let options = newQuestionData.options || "";
            let correctAnswer = newQuestionData.answer || "";

            // 根据题型的不同，确保正确的选项和答案格式
            const questionType =
              typeMap[newQuestionData.type] || originalQuestion.type;

            // 处理多选题格式
            if (questionType === "multiple") {
              // 确保多选题选项是换行格式 (A.选项1\nB.选项2)
              if (!options.includes("\n") && !options.startsWith("A.")) {
                // 可能是逗号分隔的格式，需要转换
                const optArray = options
                  .split(/[，,]/)
                  .map((o) => o.trim())
                  .filter(Boolean);
                options = optArray
                  .map((opt, idx) => {
                    const letter = String.fromCharCode(65 + idx);
                    return `${letter}.${opt}`;
                  })
                  .join("\n");
              }

              // 确保多选题答案是字母序列 (如 "ABC")
              if (correctAnswer && !/^[A-Z]+$/.test(correctAnswer)) {
                // 可能是文本内容的答案，需要转换为字母
                const answerItems = correctAnswer
                  .split(/[，,]/)
                  .map((a) => a.trim())
                  .filter(Boolean);
                const optionLines = options.split("\n");

                correctAnswer = optionLines.reduce((letters, opt, idx) => {
                  const letter = String.fromCharCode(65 + idx);
                  const optionText = opt.substring(2).trim();

                  if (
                    answerItems.some(
                      (answer) =>
                        optionText.includes(answer) ||
                        answer.includes(optionText)
                    )
                  ) {
                    return letters + letter;
                  }
                  return letters;
                }, "");
              }
            }
            // 处理单选题格式
            else if (questionType === "single") {
              // 确保单选题选项是换行格式
              if (!options.includes("\n") && !options.startsWith("A.")) {
                const optArray = options
                  .split(/[，,]/)
                  .map((o) => o.trim())
                  .filter(Boolean);
                options = optArray
                  .map((opt, idx) => {
                    const letter = String.fromCharCode(65 + idx);
                    return `${letter}.${opt}`;
                  })
                  .join("\n");
              }

              // 确保单选题答案是单个字母 (如 "A")
              if (correctAnswer && !/^[A-Z]$/.test(correctAnswer)) {
                // 可能是文本内容的答案，需要转换为字母
                const optionLines = options.split("\n");

                // 查找选项中包含答案文本的选项
                for (let i = 0; i < optionLines.length; i++) {
                  const letter = String.fromCharCode(65 + i);
                  const optionText = optionLines[i].substring(2).trim();

                  if (
                    optionText === correctAnswer ||
                    correctAnswer.includes(optionText) ||
                    optionText.includes(correctAnswer)
                  ) {
                    correctAnswer = letter;
                    break;
                  }
                }
              }
            }
            // 处理判断题格式
            else if (questionType === "truefalse") {
              options = "A.正确\nB.错误";
              correctAnswer =
                correctAnswer === "正确" || correctAnswer === "A" ? "A" : "B";
            }

            // 转换为前端格式
            const newQuestion = {
              ...originalQuestion, // 保留原题目ID等信息
              content: newQuestionData.content,
              type: questionType,
              options: options,
              correct_answer: correctAnswer,
              parse: newQuestionData.parse || originalQuestion.parse,
              difficulty: difficulty || originalQuestion.difficulty,
              regenerating: false,
            };

            // 使用Vue的响应式更新方法
            this.$set(this.previewQuestions, index, newQuestion);

            // 成功通知
            this.$notify({
              title: "成功",
              message: "题目已重新生成",
              type: "success",
            });
          } else {
            throw new Error("生成结果无效");
          }
        } catch (error) {
          console.error("专用API重新生成题目失败:", error);

          // 尝试使用通用方法
          this.fallbackRegenerate(originalQuestion, index);
        }
      } catch (error) {
        console.error("重新生成题目失败:", error);
        // 使用通用重新生成方法作为备选
        this.generateFallbackQuestion(originalQuestion, index);
      }
    },

    // 通用方法作为备选
    async fallbackRegenerate(originalQuestion, index) {
      try {
        // 在此处确保设置重新生成标志
        this.$set(this.previewQuestions[index], "regenerating", true);

        // 检查是否有参考文件
        const hasReferenceFile = !!this.referenceFile && !!this.fileContent;

        // 基本提示词
        let prompt = `请重新生成一道关于"${
          this.config.keywords
        }"的${this.getTypeName(
          originalQuestion.type
        )}题，难度为${this.getDifficultyName(originalQuestion.difficulty)}。`;

        // 如果有参考文件，添加文件内容摘要
        if (hasReferenceFile) {
          // 只提取文件内容的一部分进行摘要
          const contentSummary = this.fileContent.substring(0, 1500);
          prompt += `\n\n请根据以下参考内容生成题目：\n${contentSummary}`;
          if (this.fileContent.length > 1500) prompt += "\n...(内容已截断)";
        }

        prompt += `\n返回JSON格式，仅包含题目对象(不需要题库信息)，包含题目内容、选项、正确答案和解析。
                
                题型是${originalQuestion.type}，请确保：
                1. 单选题：options格式为"A.选项1\\nB.选项2"，correct_answer为选项字母如"A"
                2. 多选题：options格式为"A.选项1\\nB.选项2"，correct_answer为多个选项字母如"ABC"
                3. 判断题：options固定为"A.正确\\nB.错误"，correct_answer为"A"或"B"
                4. 填空题：correct_answer为答案文本，多个可能答案用逗号分隔
                5. 简答题：只需要提供参考解析`;

        // 系统提示词
        const systemPrompt = `你是一个教育AI助手，专注于生成高质量的试题。请根据用户的要求，创建一道新的题目，替代原有题目。
                ${
                  hasReferenceFile
                    ? "请仔细分析提供的参考内容，确保生成的题目与参考材料高度相关，且不与已有题目重复。"
                    : ""
                }
                返回格式必须是可解析的JSON对象，仅包含题目对象，不要包含题库信息，具体包含：type(题型代码)、content(题干)、options(选项文本)、correct_answer(正确答案)、parse(解析)。
                
                题型代码和格式要求：
                - single(单选题)：options格式为"A.选项1\\nB.选项2"，correct_answer为字母如"A"
                - multiple(多选题)：options格式为"A.选项1\\nB.选项2"，correct_answer为多个字母如"ABC"
                - truefalse(判断题)：options固定为"A.正确\\nB.错误"，correct_answer为"A"或"B"
                - fillblank(填空题)：content中必须包含"____"表示空白处，correct_answer为答案文本，多个可能答案用逗号分隔
                - shortanswer(简答题)：只需要提供参考解析，correct_answer可为空
                
                确保：
                1. 填空题必须在题目内容中明确包含下划线"____"表示空白处
                2. 判断题必须是陈述句，不能是问句，也不能包含填空符号
                3. 题目高质量、符合教育标准，答案和解析准确合理
                
                请直接返回JSON对象，不要加任何多余的说明文字。`;

        // 调用AI API
        const response = await callSiliconAI(
          prompt,
          { questionType: originalQuestion.type },
          systemPrompt
        );

        // 尝试解析返回的JSON
        try {
          let newQuestion = null;

          // 查找JSON部分
          const jsonMatch = response.match(/\{[\s\S]*\}/);
          if (jsonMatch) {
            const jsonObj = JSON.parse(jsonMatch[0]);

            // 确保选项格式正确
            let options = jsonObj.options || "";
            let correctAnswer = jsonObj.correct_answer || "";

            // 根据题型处理选项和答案格式
            if (
              jsonObj.type === "multiple" ||
              originalQuestion.type === "multiple"
            ) {
              // 确保多选题选项是换行格式 (A.选项1\nB.选项2)
              if (!options.includes("\n") && !options.startsWith("A.")) {
                // 可能是逗号分隔的格式，需要转换
                const optArray = options
                  .split(/[，,]/)
                  .map((o) => o.trim())
                  .filter(Boolean);
                options = optArray
                  .map((opt, idx) => {
                    const letter = String.fromCharCode(65 + idx);
                    return `${letter}.${opt}`;
                  })
                  .join("\n");
              }

              // 确保多选题答案是字母序列 (如 "ABC")
              if (correctAnswer && !/^[A-Z]+$/.test(correctAnswer)) {
                // 可能是文本内容的答案，需要转换为字母
                const answerItems = correctAnswer
                  .split(/[，,]/)
                  .map((a) => a.trim())
                  .filter(Boolean);
                const optionLines = options.split("\n");

                correctAnswer = optionLines.reduce((letters, opt, idx) => {
                  const letter = String.fromCharCode(65 + idx);
                  const optionText = opt.substring(2).trim();

                  if (
                    answerItems.some(
                      (answer) =>
                        optionText.includes(answer) ||
                        answer.includes(optionText)
                    )
                  ) {
                    return letters + letter;
                  }
                  return letters;
                }, "");
              }
            } else if (
              jsonObj.type === "single" ||
              originalQuestion.type === "single"
            ) {
              // 确保单选题选项是换行格式
              if (!options.includes("\n") && !options.startsWith("A.")) {
                const optArray = options
                  .split(/[，,]/)
                  .map((o) => o.trim())
                  .filter(Boolean);
                options = optArray
                  .map((opt, idx) => {
                    const letter = String.fromCharCode(65 + idx);
                    return `${letter}.${opt}`;
                  })
                  .join("\n");
              }

              // 确保单选题答案是单个字母 (如 "A")
              if (correctAnswer && !/^[A-Z]$/.test(correctAnswer)) {
                // 可能是文本内容的答案，需要转换为字母
                const optionLines = options.split("\n");

                // 查找选项中包含答案文本的选项
                for (let i = 0; i < optionLines.length; i++) {
                  const letter = String.fromCharCode(65 + i);
                  const optionText = optionLines[i].substring(2).trim();

                  if (
                    optionText === correctAnswer ||
                    correctAnswer.includes(optionText) ||
                    optionText.includes(correctAnswer)
                  ) {
                    correctAnswer = letter;
                    break;
                  }
                }
              }
            } else if (
              jsonObj.type === "truefalse" ||
              originalQuestion.type === "truefalse"
            ) {
              options = "A.正确\nB.错误";
              correctAnswer =
                correctAnswer === "正确" || correctAnswer === "A" ? "A" : "B";
            }

            // 确保填空题包含下划线
            if (
              (jsonObj.type === "fillblank" ||
                originalQuestion.type === "fillblank") &&
              jsonObj.content &&
              !jsonObj.content.includes("____")
            ) {
              jsonObj.content = jsonObj.content.replace(/[?？]+$/, ""); // 移除问句结尾的问号
              jsonObj.content += "____"; // 添加下划线
            }

            // 转换为预览格式
            newQuestion = {
              ...originalQuestion,
              content: jsonObj.content || originalQuestion.content,
              options: options,
              correct_answer: correctAnswer,
              parse: jsonObj.parse || originalQuestion.parse,
              regenerating: false,
            };
          }

          // 如果成功解析，更新题目
          if (newQuestion) {
            this.$set(this.previewQuestions, index, newQuestion);
            // 成功通知
            this.$notify({
              title: "成功",
              message: "题目已重新生成",
              type: "success",
            });
          } else {
            throw new Error("解析生成内容失败");
          }
        } catch (error) {
          console.error("解析AI响应失败:", error);
          // 使用通用重新生成方法作为备选
          this.generateFallbackQuestion(originalQuestion, index);
        }
      } catch (error) {
        console.error("备选重新生成方法失败:", error);
        this.generateFallbackQuestion(originalQuestion, index);
      }
    },

    // 生成备选题目（当AI生成失败时）
    generateFallbackQuestion(originalQuestion, index) {
      // 使用本地方法生成题目作为备选
      const fallbackQuestion = this.generateQuestion(originalQuestion.type);
      // 保留原题目的一些属性
      fallbackQuestion.difficulty = originalQuestion.difficulty;
      fallbackQuestion.regenerating = false; // 确保设置为false

      // 使用Vue的响应式更新方法
      this.$set(this.previewQuestions, index, fallbackQuestion);

      // 提示用户
      this.$notify({
        title: "提示",
        message: "使用本地生成替代，你可以再次尝试重新生成",
        type: "info",
      });
    },
    // 获取特定题型的已生成题目数量
    getTypeCount(type) {
      return this.previewQuestions.filter((q) => q.type === type).length;
    },
    // 拒绝所有题目
    rejectAllQuestions() {
      // 清空预览列表
      this.previewQuestions = [];
      this.$notify({
        title: "提示",
        message: "已拒绝所有题目，可以继续生成",
        type: "info",
        duration: 2000,
      });
    },
  },
  // 组件销毁前的钩子函数
  beforeDestroy() {
    // 清理工作已由各个方法内部处理
  },
};
</script>
  
<style lang="less" scoped>
@import "@/styles/variables.less";

/* 添加缺少的变量，以防variables.less中没有定义 */
@radius-full: 9999px;
@radius-md: 6px;
@radius-lg: 8px;
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
@shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@transition: all 0.3s ease;
@secondary: #3a0ca3; /* 紫色作为辅助色 */

.ai-generator-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
}

.ai-generator-container {
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;

  &.fullscreen {
    max-width: 100%;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

.ai-generator-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid @gray-200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;

  .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;

    h2 {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.5rem;

      i {
        font-size: 1.2em;
      }
    }

    .ai-status {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      opacity: 0.9;

      .pulse-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #10b981;
        animation: pulse 1.5s infinite;
      }
    }
  }

  .header-actions {
    display: flex;
    gap: 0.5rem;

    .btn-icon {
      background: rgba(255, 255, 255, 0.1);
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
      }

      &.btn-close:hover {
        background: rgba(239, 68, 68, 0.7);
      }

      i {
        font-size: 1rem;
      }
    }
  }
}

.ai-generator-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.config-panel {
  width: 350px;
  padding: 1.5rem;
  border-right: 1px solid @gray-200;
  background: white;
  transition: all 0.3s ease;
  overflow-y: auto;

  &.collapsed {
    transform: translateX(-100%);
    opacity: 0;
    width: 0;
    padding: 0;
    border: none;
  }

  .panel-section {
    margin-bottom: 2rem;

    h3 {
      font-size: 1rem;
      color: @gray-700;
      margin: 0 0 1.25rem 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;

      i {
        color: @primary;
      }
    }
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .form-group {
    label {
      display: block;
      margin-bottom: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: @gray-700;
    }

    .input-with-icon {
      position: relative;

      i,
      .fas,
      .far,
      .fab {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: @gray-500;
        font-size: 0.875rem;
        z-index: 1;
      }

      &.textarea-container i {
        top: 12px;
        transform: none;
      }
    }

    .input-group {
      position: relative;

      label {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: @gray-500;
        font-size: 0.875rem;
      }
    }

    .modern-input {
      width: 100%;
      padding: 0.75rem 1rem 0.75rem 2.5rem;
      border: 1px solid @gray-300;
      border-radius: 8px;
      font-size: 0.875rem;
      transition: all 0.2s ease;
      background-color: @gray-50;

      &:focus {
        outline: none;
        border-color: @primary;
        box-shadow: 0 0 0 3px rgba(@primary, 0.1);
        background-color: white;
      }

      &::placeholder {
        color: @gray-400;
      }
    }

    select.modern-input {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 16px 12px;
    }
  }

  .type-config-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .type-config-card {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid @gray-200;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.75rem;
    background-color: white;

    &:hover {
      border-color: @primary-light;
      box-shadow: @shadow-sm;
    }

    &.active {
      border-color: @primary;
      background-color: rgba(@primary, 0.05);

      .type-icon {
        color: white;
      }
    }

    .type-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1rem;
      flex-shrink: 0;
    }

    .type-info {
      flex: 1;

      .type-name {
        display: block;
        font-weight: 500;
        color: @gray-800;
        font-size: 0.875rem;
      }

      .type-desc {
        display: block;
        font-size: 0.75rem;
        color: @gray-500;
        margin-top: 0.125rem;
      }
    }

    .type-count {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      .count-btn {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        border: 1px solid @gray-300;
        background: white;
        color: @gray-700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;

        &:hover {
          background: @gray-100;
          color: @primary;
        }

        i {
          font-size: 0.625rem;
        }
      }

      .count-value {
        font-size: 0.875rem;
        font-weight: 500;
        color: @gray-800;
        min-width: 20px;
        text-align: center;
      }
    }
  }

  .total-count {
    font-size: 0.8125rem;
    color: @gray-600;
    background: @gray-50;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.25rem;

    &.count-limit {
      background-color: rgba(@warning, 0.15);
      color: @warning;
      animation: pulse 1s infinite alternate;

      .highlight-warning {
        color: @warning;
        animation: pulse-scale 1s infinite alternate;
      }
    }

    &.quota-normal {
      background: rgba(66, 133, 244, 0.1);
      color: #1a56db;

      .highlight {
        color: #1a56db;
      }
    }

    .highlight {
      font-weight: 600;
      color: @primary;
    }

    .max-count {
      color: #3b82f6;
      font-weight: 600;
    }
  }

  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;

    button {
      padding: 0.75rem;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      font-size: 0.9375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .btn-generate {
      background: @primary;
      color: white;
      box-shadow: 0 2px 4px rgba(@primary, 0.2);

      &:hover {
        background: darken(@primary, 5%);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(@primary, 0.2);
      }

      &:disabled {
        background: @gray-400;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }
    }

    .btn-templates,
    .btn-quick-create {
      display: flex;
      align-items: center;
      background: white;
      border: 1px solid @gray-200;
      text-align: left;
      justify-content: flex-start;
      padding: 0.75rem 1rem;
      transition: all 0.25s ease;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      border-radius: 8px;

      &:hover {
        transform: translateY(-2px);
        border-color: @primary-light;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

        .btn-icon-container {
          transform: scale(1.1);
        }
      }

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        opacity: 0;
        transition: opacity 0.25s ease;
      }

      &:hover:before {
        opacity: 1;
      }

      .btn-icon-container {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-right: 12px;
        transition: transform 0.25s ease;
        color: white;
      }

      .btn-text {
        display: flex;
        flex-direction: column;
      }

      .btn-title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: @gray-800;
      }

      .btn-desc {
        font-size: 0.8125rem;
        color: @gray-600;
      }
    }

    .btn-templates {
      &:before {
        background: linear-gradient(to bottom, #4361ee, #3a0ca3);
      }

      .btn-icon-container {
        background: linear-gradient(135deg, #4361ee, #3a0ca3);
      }
    }

    .btn-quick-create {
      &:before {
        background: linear-gradient(to bottom, #f59e0b, #fbbf24);
      }

      .btn-icon-container {
        background: linear-gradient(135deg, #f59e0b, #fbbf24);
      }
    }

    .btn-batch-accept {
      background: @success;
      color: white;
      box-shadow: 0 2px 4px rgba(@success, 0.2);

      &:hover {
        background: darken(@success, 5%);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(@success, 0.2);
      }
    }

    .btn-cancel {
      background: @gray-100;
      color: @gray-700;

      &:hover {
        background: @gray-200;
      }
    }
  }
}

.result-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;

  &.expanded {
    margin-left: 0;
  }

  .result-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid @gray-200;
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      margin: 0;
      font-size: 1rem;
      color: @gray-700;
      display: flex;
      align-items: center;
      gap: 0.5rem;

      i {
        color: @primary;
      }
    }

    .result-stats {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: center;

      .stat-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .stat-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.5rem;
        color: white;
        font-weight: 500;
        box-shadow: @shadow-sm;
      }

      .stat-count {
        font-size: 0.75rem;
        color: @gray-600;
      }
    }
  }

  .result-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background-color: @gray-50;
  }

  .generating-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 2rem;

    /* 添加背景微妙变化 */
    background: linear-gradient(
      135deg,
      rgba(67, 97, 238, 0.03),
      rgba(58, 12, 163, 0.05)
    );
    border-radius: 12px;

    .ai-thinking-animation {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-bottom: 2rem;

      .ai-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, @primary, @secondary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: @shadow-md;
        animation: float 3s ease-in-out infinite;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          top: -5px;
          left: -5px;
          right: -5px;
          bottom: -5px;
          border-radius: 50%;
          border: 2px solid rgba(@primary, 0.3);
          animation: pulse 2s infinite;
        }
      }

      .thinking-bubbles {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;

        .bubble {
          background: white;
          padding: 0.75rem 1rem;
          border-radius: 1rem 1rem 1rem 0;
          font-size: 0.875rem;
          color: @gray-700;
          box-shadow: @shadow-sm;
          opacity: 0.5;
          transform: translateY(5px);
          transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
          position: relative;
          backdrop-filter: blur(5px);

          &::before {
            content: "";
            position: absolute;
            left: -8px;
            bottom: 0;
            width: 0;
            height: 0;
            border-right: 8px solid white;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1));
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
          }

          &.active {
            opacity: 1;
            transform: translateY(0);
            background: @primary;
            color: white;
            font-weight: 500;

            &::before {
              border-right-color: @primary;
            }
          }

          &:nth-child(2) {
            transition-delay: 0.1s;
          }

          &:nth-child(3) {
            transition-delay: 0.2s;
          }

          &:nth-child(4) {
            transition-delay: 0.3s;
          }
        }
      }
    }

    .progress-container {
      width: 100%;
      max-width: 500px;

      .progress-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        color: @gray-600;
        font-weight: 500;
      }

      .progress-bar {
        height: 8px;
        background: @gray-200;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, @primary, @secondary);
        border-radius: 12px;
        transition: width 0.5s ease;
        position: relative;
        overflow: hidden;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1) 25%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.1) 75%
          );
          background-size: 200% 100%;
          animation: shimmer 2s infinite linear;
        }
      }
    }
  }

  .error-message {
    background: rgba(@danger, 0.1);
    color: @danger;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;

    i {
      font-size: 1rem;
    }
  }

  .questions-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.25rem;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }

  .question-card {
    background: white;
    border-radius: 12px;
    box-shadow: @shadow-md;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    border-top: 4px solid transparent;
    animation: fadeInUp 0.3s ease-out;
    margin-bottom: 1.5rem;

    &:hover {
      transform: translateY(-3px);
      box-shadow: @shadow-lg;
    }

    /* 题目类型颜色标识 */
    &.single {
      border-top-color: #4361ee;
      .question-type {
        background: linear-gradient(135deg, #4361ee, #3a0ca3);
      }
    }

    &.multiple {
      border-top-color: #3a0ca3;
      .question-type {
        background: linear-gradient(135deg, #3a0ca3, #7209b7);
      }
    }

    &.truefalse {
      border-top-color: #10b981;
      .question-type {
        background: linear-gradient(135deg, #10b981, #059669);
      }
    }

    &.fillblank {
      border-top-color: #f59e0b;
      .question-type {
        background: linear-gradient(135deg, #f59e0b, #d97706);
      }
    }

    &.shortanswer {
      border-top-color: #8b5cf6;
      .question-type {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
      }
    }

    /* 改进重新生成状态样式 */
    &[regenerating="true"] {
      opacity: 0.8;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 12px;
        z-index: 10;
      }

      .question-header::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        border: 3px solid rgba(67, 97, 238, 0.3);
        border-top-color: #4361ee;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        z-index: 11;
      }
    }

    .question-header {
      padding: 0.75rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      background: fade(@gray-100, 50%);
      border-bottom: 1px solid @gray-200;

      .question-number {
        font-size: 1.125rem;
        font-weight: 600;
        color: @gray-700;
        min-width: 30px;
      }

      .question-type {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
        border-radius: @radius-full;
        color: white;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        box-shadow: @shadow-sm;

        i {
          font-size: 0.7rem;
        }
      }

      .question-difficulty {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
        border-radius: @radius-full;
        font-weight: 500;
        background: @gray-200;
        color: @gray-700;
        display: flex;
        align-items: center;
        gap: 0.25rem;

        i {
          font-size: 0.7rem;
        }
      }

      .question-actions {
        margin-left: auto;
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        width: 100%;

        .btn-action {
          padding: 0.375rem 0.75rem;
          border-radius: @radius-md;
          font-size: 0.8125rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          border: none;
          display: flex;
          align-items: center;
          gap: 0.375rem;
          box-shadow: @shadow-sm;

          i {
            font-size: 0.75rem;
          }

          &.btn-accept {
            background: @success;
            color: white;

            &:hover {
              background: darken(@success, 5%);
              transform: translateY(-1px);
            }
          }

          &.btn-reject {
            background: @danger;
            color: white;

            &:hover {
              background: darken(@danger, 5%);
              transform: translateY(-1px);
            }
          }

          &.btn-regenerate {
            background: @gray-600;
            color: white;

            &:hover {
              background: darken(@gray-600, 5%);
              transform: translateY(-1px);
            }
          }
        }
      }
    }

    .question-content {
      padding: 1.25rem 1.5rem;
      font-size: 0.9375rem;
      color: @gray-800;
      line-height: 1.6;
      position: relative;

      &:before {
        content: "Q";
        position: absolute;
        left: 0.5rem;
        top: 1rem;
        font-size: 2.5rem;
        font-weight: bold;
        color: fade(@gray-300, 50%);
        z-index: 0;
      }

      > * {
        position: relative;
        z-index: 1;
      }
    }

    .question-options {
      padding: 0 1.5rem 1rem;

      .option-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        margin-bottom: 0.5rem;
        border-radius: @radius-md;
        background: @gray-50;
        font-size: 0.875rem;
        transition: all 0.2s ease;
        position: relative;

        &.correct {
          background: rgba(16, 185, 129, 0.1);
          border: 1px solid rgba(16, 185, 129, 0.3);
          color: @gray-900;

          // 增加权重显示多个选项可以都是正确的
          .option-content {
            font-weight: 500;
          }

          // 更明显的正确标记
          .correct-indicator {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #10b981;
            font-size: 1rem;
            background: rgba(16, 185, 129, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 4px;

            i {
              color: #10b981;
            }
          }
        }

        .option-content {
          flex: 1;
        }
      }
    }

    .question-footer {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding: 0.75rem 1.5rem;
      margin-top: auto;
      border-top: 1px solid @gray-200;
      background: fade(@gray-50, 50%);
      border-radius: 0 0 12px 12px;

      .answer-section {
        font-size: 0.875rem;
        display: flex;
        align-items: center;

        .answer-label {
          color: @gray-600;
          margin-right: 0.5rem;
          font-weight: 500;
        }

        .answer-value {
          font-weight: 600;
          color: @primary;
          line-height: 1.4;
        }
      }

      .parse-section {
        padding: 0.75rem;
        background: rgba(67, 97, 238, 0.05);
        border-radius: 8px;
        border-left: 3px solid @primary;

        .parse-title {
          font-size: 0.875rem;
          font-weight: 600;
          color: @primary;
          margin-bottom: 0.5rem;
          display: flex;
          align-items: center;
          gap: 0.375rem;
        }

        .parse-content {
          font-size: 0.8125rem;
          color: @gray-700;
          line-height: 1.5;
        }
      }

      .footer-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }

      .ai-tag {
        font-size: 0.75rem;
        color: @gray-500;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: fade(@gray-100, 70%);
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        width: fit-content;

        i {
          color: @primary;
        }
      }

      .question-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;

        .btn-action {
          padding: 0.375rem 0.75rem;
          border-radius: @radius-md;
          font-size: 0.8125rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          border: none;
          display: flex;
          align-items: center;
          gap: 0.375rem;
          box-shadow: @shadow-sm;

          i {
            font-size: 0.75rem;
          }

          &.btn-regenerate {
            background: @gray-600;
            color: white;

            &:hover {
              background: darken(@gray-600, 5%);
              transform: translateY(-1px);
            }

            &:disabled {
              opacity: 0.6;
              cursor: not-allowed;
              transform: none;

              &:hover {
                background: @gray-600;
                transform: none;
              }
            }
          }
        }
      }
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 2rem;

    .empty-illustration {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: @gray-100;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;

      i {
        font-size: 2.5rem;
        color: @gray-400;
      }
    }

    h4 {
      font-size: 1.125rem;
      color: @gray-700;
      margin: 0 0 0.5rem 0;
    }

    p {
      font-size: 0.875rem;
      color: @gray-500;
      margin: 0 0 1.5rem 0;
      max-width: 300px;
    }

    .btn-upload-file {
      background: @gray-100;
      color: @gray-700;
      border: none;
      padding: 0.75rem 1.25rem;
      border-radius: 8px;
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;

      &:hover {
        background: @gray-200;
        color: @primary;
      }

      i {
        font-size: 1.125rem;
        color: @primary;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialogEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -200% 0%;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (max-width: 1024px) {
  .ai-generator-container {
    width: 95%;
    height: 90vh;
  }

  .config-panel {
    width: 300px;
  }
}

@media (max-width: 768px) {
  .ai-generator-content {
    flex-direction: column;
  }

  .config-panel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid @gray-200;

    &.collapsed {
      transform: translateY(-100%);
    }
  }

  .result-panel {
    &.expanded {
      margin-left: 0;
      margin-top: 0;
    }
  }

  .result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;

    .result-stats {
      width: 100%;
      overflow-x: auto;
      padding-bottom: 0.5rem;
    }
  }
}

@media (max-width: 480px) {
  .ai-generator-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;

    .header-left {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25rem;
    }

    .header-actions {
      width: 100%;
      justify-content: flex-end;
    }
  }

  .type-config-card {
    flex-direction: column;
    align-items: flex-start;

    .type-count {
      width: 100%;
      justify-content: flex-end;
      margin-top: 0.5rem;
    }
  }

  .action-buttons {
    flex-direction: row;

    button {
      flex: 1;
    }
  }
}

// 新增样式：题库创建区域
.bank-create-section {
  background-color: #f8fafc;
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid @gray-200;
  transition: all 0.3s ease;

  &:hover {
    border-color: @primary-light;
    box-shadow: 0 2px 8px rgba(67, 97, 238, 0.15);
  }

  h3 {
    color: @gray-800;
    margin-bottom: 1.25rem !important;

    i {
      color: #4361ee;
    }
  }

  .required {
    color: @danger;
    margin-left: 0.25rem;
  }

  .text-area {
    min-height: 80px;
    resize: vertical;
    padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    font-family: inherit;
  }

  .input-with-icon {
    margin-bottom: 0.75rem;
  }

  .modern-input:focus {
    border-color: #4361ee;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
  }
}

.file-preview {
  margin: 15px 0;

  .file-preview-card {
    display: flex;
    align-items: center;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;

    &:hover {
      background-color: #eef2ff;
      border-color: #c7d2fe;
    }

    .file-icon {
      width: 36px;
      height: 36px;
      background-color: #eef2ff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;

      i {
        color: #4f46e5;
        font-size: 18px;
        position: static !important;
        transform: none !important;
      }
    }

    .file-info {
      flex: 1;
      display: flex;
      flex-direction: column;

      .file-name {
        font-weight: 500;
        font-size: 14px;
        color: #334155;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .file-size {
        font-size: 12px;
        color: #64748b;
      }
    }

    .btn-remove-file {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #f1f5f9;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;

      i {
        color: #64748b;
        font-size: 12px;
        position: static !important;
        transform: none !important;
      }

      &:hover {
        background-color: #ef4444;

        i {
          color: white;
        }
      }
    }
  }
}

.template-selector {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease-out;
  backdrop-filter: blur(5px);

  .template-modal {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2),
      0 10px 10px -5px rgba(0, 0, 0, 0.1);
    animation: dialogEnter 0.3s ease-out;

    .template-header {
      padding: 1rem 1.5rem;
      border-bottom: 1px solid @gray-200;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, #4361ee, #3a0ca3);
      color: white;

      h3 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        i {
          font-size: 1.2em;
        }
      }

      .template-header-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .btn-refresh {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover:not(:disabled) {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(1.05);
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }

        .fa-spin {
          animation: spin 1s linear infinite;
        }

        i {
          font-size: 1rem;
        }
      }

      .btn-close {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(1.05);
        }

        i {
          font-size: 1rem;
        }
      }
    }
  }

  .template-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: 60vh;
    overflow-y: auto;

    .template-intro {
      font-size: 0.95rem;
      color: @gray-700;
      margin: 0 0 0.5rem 0;
      text-align: center;
      font-weight: 400;
      line-height: 1.5;
    }

    .template-loading {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      min-height: 200px;

      .loading-animation {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        text-align: center;

        .ai-avatar {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: linear-gradient(135deg, @primary, @secondary);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
          box-shadow: @shadow-md;
          animation: float 3s ease-in-out infinite;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border-radius: 50%;
            border: 2px solid rgba(@primary, 0.3);
            animation: pulse 2s infinite;
          }
        }

        .loading-text {
          font-size: 1rem;
          color: @gray-700;
          max-width: 300px;
          animation: fadeInOut 2s ease-in-out infinite;
        }
      }
    }

    .template-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 1.25rem;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }

    .template-card {
      background: white;
      border: 1px solid @gray-200;
      border-radius: 12px;
      padding: 1.25rem;
      box-shadow: @shadow-sm;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 1rem;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:hover {
        transform: translateY(-2px);
        box-shadow: @shadow-md;
        border-color: @primary-light;
      }

      &.selected {
        border: 2px solid @primary;
        background-color: rgba(@primary, 0.05);

        .selection-indicator {
          opacity: 1;
          transform: scale(1);

          i {
            color: @primary;
          }
        }

        .template-icon {
          background: @primary;
        }
      }

      .template-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #4361ee, #3a0ca3);
        color: white;
        font-size: 1.25rem;
        flex-shrink: 0;
      }

      .template-info {
        flex: 1;
        min-width: 0; /* For text truncation */

        .template-name {
          font-weight: 600;
          color: @gray-800;
          font-size: 1rem;
          margin-bottom: 0.25rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .template-description {
          font-size: 0.875rem;
          color: @gray-600;
          margin-bottom: 0.75rem;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .template-stats {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;

          .template-difficulty {
            font-size: 0.75rem;
            color: @gray-600;
            display: flex;
            align-items: center;
            gap: 0.5rem;

            &.easy {
              color: #10b981;
              i {
                color: #10b981;
              }
            }
            &.medium {
              color: #f59e0b;
              i {
                color: #f59e0b;
              }
            }
            &.hard {
              color: #ef4444;
              i {
                color: #ef4444;
              }
            }

            i {
              font-size: 0.875rem;
            }
          }

          .type-distribution {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;

            .type-badge {
              font-size: 0.75rem;
              padding: 0.25rem 0.5rem;
              border-radius: 20px;
              color: white;
              font-weight: 500;
              display: inline-flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
}

.quick-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  background-color: white;

  .btn-cancel,
  .btn-quick-generate {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .btn-cancel {
    background: #f1f5f9;
    color: #475569;

    &:hover {
      background: #e2e8f0;
      transform: translateY(-1px);
    }

    i {
      font-size: 0.875rem;
    }
  }

  .btn-quick-generate {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(245, 158, 11, 0.25);
    }

    &:active {
      transform: translateY(0);
      box-shadow: 0 1px 2px rgba(245, 158, 11, 0.2);
    }

    &:disabled {
      background: #94a3b8;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    i {
      font-size: 0.875rem;
    }
  }
}

.range-with-display {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;

  .range-slider {
    width: 70%;

    input[type="range"] {
      width: 100%;
      height: 8px;
      background: #fde68a;
      border-radius: 4px;
      outline: none;
      transition: all 0.2s ease;
      appearance: none;

      &::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #f59e0b;
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      &::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #f59e0b;
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .range-display {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: white;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid @gray-300;
    min-width: 50px;
    justify-content: center;

    .value {
      font-size: 0.875rem;
      font-weight: 600;
      color: #f59e0b;
    }

    .unit {
      font-size: 0.75rem;
      color: @gray-600;
    }
  }
}

.difficulty-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  margin: 0.5rem 0;

  .difficulty-option {
    flex: 1;
    padding: 0.75rem;
    border-radius: 8px;
    border: 2px solid transparent;
    background: white;
    color: @gray-700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

    &.active {
      border-color: currentColor;
      background: rgba(255, 255, 255, 0.7);
      font-weight: 600;
      transform: scale(1.05);
      z-index: 1;

      &[class*="easy"] {
        color: #10b981;
        background: rgba(16, 185, 129, 0.08);
      }

      &[class*="medium"] {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.08);
      }

      &[class*="hard"] {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.08);
      }

      // 移除专家级样式
    }

    .difficulty-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
  }
}

.type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;

  .type-option {
    flex: 1 0 calc(33.33% - 0.5rem);
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid @gray-300;
    background: white;
    color: @gray-700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    &:hover {
      background: @gray-50;
    }

    &.active {
      border-width: 2px;
      font-weight: 500;

      &.single {
        color: #4361ee;
        border-color: #4361ee;
        background: rgba(67, 97, 238, 0.05);
      }

      &.multiple {
        color: #3a0ca3;
        border-color: #3a0ca3;
        background: rgba(58, 12, 163, 0.05);
      }

      &.fillblank {
        color: #f59e0b;
        border-color: #f59e0b;
        background: rgba(245, 158, 11, 0.05);
      }

      &.truefalse {
        color: #10b981;
        border-color: #10b981;
        background: rgba(16, 185, 129, 0.05);
      }

      &.shortanswer {
        color: #8b5cf6;
        border-color: #8b5cf6;
        background: rgba(139, 92, 246, 0.05);
      }
    }

    .type-icon {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      flex-shrink: 0;
    }
  }
}

.btn-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon-container {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
}

.btn-text {
  display: flex;
  flex-direction: column;
}

.btn-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: @gray-800;
}

.btn-desc {
  font-size: 0.75rem;
  color: @gray-600;
}

.generating-dialog {
}

.template-selector {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease-out;
  backdrop-filter: blur(5px);

  .template-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid @gray-200;
    background-color: #f8fafc;

    .btn-cancel,
    .btn-apply-template {
      padding: 0.75rem 1.25rem;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      font-size: 0.9375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .btn-cancel {
      background: @gray-100;
      color: @gray-700;

      &:hover {
        background: @gray-200;
      }

      i {
        font-size: 0.875rem;
      }
    }

    .btn-apply-template {
      background: @primary;
      color: white;
      box-shadow: 0 2px 4px rgba(@primary, 0.2);

      &:hover {
        background: darken(@primary, 5%);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(@primary, 0.2);
      }

      &:disabled {
        background: @gray-400;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      i {
        font-size: 0.875rem;
      }
    }
  }
}

.quick-create-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease-out;
  backdrop-filter: blur(5px);

  .quick-create-modal {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2),
      0 10px 10px -5px rgba(0, 0, 0, 0.1);
    animation: dialogEnter 0.3s ease-out;

    .quick-create-header {
      padding: 1rem 1.5rem;
      border-bottom: 1px solid @gray-200;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, #f59e0b, #fbbf24);
      color: white;

      h3 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        i {
          font-size: 1.2em;
        }
      }

      .btn-close {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(1.05);
        }

        i {
          font-size: 1rem;
        }
      }
    }

    .quick-create-content {
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      max-height: 60vh;
      overflow-y: auto;

      .quick-create-intro {
        background: linear-gradient(
          135deg,
          rgba(245, 158, 11, 0.08),
          rgba(251, 191, 36, 0.06)
        );
        border-radius: 10px;
        padding: 1.25rem;
        margin: 0 1rem 1.25rem;
        display: flex;
        gap: 1rem;
        position: relative;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(245, 158, 11, 0.1);
        min-height: 125px;

        &::before {
          content: "";
          position: absolute;
          top: -20px;
          right: -20px;
          width: 120px;
          height: 120px;
          background: radial-gradient(
            circle at top right,
            rgba(245, 158, 11, 0.15),
            transparent 70%
          );
          border-radius: 50%;
          z-index: 0;
        }

        .intro-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background: linear-gradient(135deg, #f59e0b, #fbbf24);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.25rem;
          box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
          position: relative;
          z-index: 1;
          flex-shrink: 0;

          &::after {
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border-radius: 16px;
            background: linear-gradient(
              135deg,
              rgba(245, 158, 11, 0.3),
              rgba(251, 191, 36, 0.1)
            );
            z-index: -1;
            opacity: 0.6;
          }
        }

        .intro-content {
          flex: 1;
          position: relative;
          z-index: 1;

          h3 {
            font-size: 1.125rem;
            font-weight: 600;
            color: #d97706;
            margin: 0 0 0.75rem 0;
          }

          .intro-features {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            .feature-item {
              display: flex;
              align-items: flex-start;
              gap: 0.5rem;

              i {
                color: #f59e0b;
                font-size: 0.75rem;
                margin-top: 0.25rem;
                background: rgba(245, 158, 11, 0.1);
                padding: 0.25rem;
                border-radius: 4px;
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
              }

              span {
                font-size: 0.875rem;
                color: #4b5563;
                line-height: 1.5;
              }
            }
          }
        }
      }

      .quick-create-form {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        padding: 0 1rem;

        .form-section {
          background: white;
          padding: 1.25rem;
          border-radius: 10px;
          border: none;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
            0 1px 2px rgba(0, 0, 0, 0.03);
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;

          &:hover {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05),
              0 2px 4px rgba(0, 0, 0, 0.03);
            transform: translateY(-2px);
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #f59e0b, #fbbf24);
          }

          .section-title {
            font-size: 1rem;
            color: #f59e0b;
            margin: 0 0 1.25rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;

            i {
              color: #f59e0b;
              background: rgba(245, 158, 11, 0.1);
              padding: 0.5rem;
              border-radius: 8px;
              font-size: 0.875rem;
            }
          }

          label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
          }

          .input-with-icon {
            position: relative;

            i {
              position: absolute;
              left: 12px;
              top: 50%;
              transform: translateY(-50%);
              color: #6b7280;
              font-size: 0.875rem;
            }
          }

          .modern-input {
            width: 100%;
            padding: 0.625rem 1rem 0.625rem 2.25rem;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            font-size: 0.875rem;
            transition: all 0.2s ease;
            background-color: white;

            &:focus {
              outline: none;
              border-color: #f59e0b;
              box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
            }

            &::placeholder {
              color: #9ca3af;
            }
          }

          // Tag input styling
          .tag-input {
            display: inline-flex;
            align-items: center;
            background-color: #eef2ff;
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            margin-bottom: 0.75rem;
            max-width: fit-content;
            color: #3730a3;
            font-size: 0.875rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

            i {
              margin-right: 0.5rem;
              color: #6366f1;
              font-size: 0.75rem;
            }
          }

          // AI hint text
          .ai-hint {
            font-size: 0.8125rem;
            color: #6b7280;
            margin: 0.5rem 0 0;
            padding: 0;
            line-height: 1.5;
            display: flex;
            align-items: center;
            gap: 0.375rem;

            &::before {
              // content: '\f05a';
              font-family: "Font Awesome 5 Free";
              font-weight: 900;
              color: #9ca3af;
              font-size: 0.75rem;
            }
          }

          .option-group {
            margin-bottom: 1.5rem;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        .range-with-display {
          display: flex;
          align-items: center;
          gap: 1rem;
          flex: 1;
          margin-top: 0.25rem;

          .range-slider {
            flex: 1;

            input[type="range"] {
              width: 100%;
              height: 6px;
              background: linear-gradient(to right, #fcd34d 0%, #f59e0b 100%);
              border-radius: 10px;
              outline: none;
              transition: all 0.2s ease;
              appearance: none;

              &::-webkit-slider-thumb {
                appearance: none;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: white;
                cursor: pointer;
                border: 2px solid #f59e0b;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
              }

              &::-moz-range-thumb {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: white;
                cursor: pointer;
                border: 2px solid #f59e0b;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
              }
            }
          }

          .range-display {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;
            background: white;
            padding: 0.375rem 0.75rem;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            min-width: 60px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

            .value {
              font-size: 0.875rem;
              font-weight: 600;
              color: #f59e0b;
            }

            .unit {
              font-size: 0.75rem;
              color: #6b7280;
            }
          }
        }

        .difficulty-selector {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          flex: 1;
          margin: 0.5rem 0;

          .difficulty-option {
            flex: 1;
            padding: 0.625rem 0.5rem;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            background: white;
            color: #4b5563;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

            &:hover {
              background: #f9fafb;
              transform: translateY(-1px);
            }

            &.active {
              transform: translateY(-2px);
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

              &[class*="easy"] {
                color: #059669;
                border-color: #10b981;
                background: rgba(16, 185, 129, 0.05);
              }

              &[class*="medium"] {
                color: #d97706;
                border-color: #f59e0b;
                background: rgba(245, 158, 11, 0.05);
              }

              &[class*="hard"] {
                color: #dc2626;
                border-color: #ef4444;
                background: rgba(239, 68, 68, 0.05);
              }
            }

            .difficulty-dot {
              width: 10px;
              height: 10px;
              border-radius: 50%;
            }
          }
        }

        .type-selector {
          display: flex;
          flex-wrap: wrap;
          gap: 0.75rem;
          margin-top: 0.5rem;

          .type-option {
            flex: 1 0 calc(33.33% - 0.5rem);
            padding: 0.75rem 0.625rem;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            background: white;
            color: #4b5563;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

            &:hover {
              background: #f9fafb;
              transform: translateY(-1px);
            }

            &.active {
              border-width: 2px;
              font-weight: 500;
              transform: translateY(-2px);
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

              &.single {
                color: #4361ee;
                border-color: #4361ee;
                background: rgba(67, 97, 238, 0.05);
              }

              &.multiple {
                color: #3a0ca3;
                border-color: #3a0ca3;
                background: rgba(58, 12, 163, 0.05);
              }

              &.fillblank {
                color: #d97706;
                border-color: #f59e0b;
                background: rgba(245, 158, 11, 0.05);
              }

              &.truefalse {
                color: #059669;
                border-color: #10b981;
                background: rgba(16, 185, 129, 0.05);
              }

              &.shortanswer {
                color: #7c3aed;
                border-color: #8b5cf6;
                background: rgba(139, 92, 246, 0.05);
              }
            }

            .type-icon {
              width: 24px;
              height: 24px;
              border-radius: 6px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              flex-shrink: 0;
              font-size: 0.75rem;
            }
          }
        }
      }
    }
  }

  .quick-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid @gray-200;
    background-color: #f8fafc;

    .btn-cancel,
    .btn-quick-generate {
      padding: 0.75rem 1.25rem;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      font-size: 0.9375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .btn-cancel {
      background: @gray-100;
      color: @gray-700;

      &:hover {
        background: @gray-200;
      }

      i {
        font-size: 0.875rem;
      }
    }

    .btn-quick-generate {
      background: #f59e0b;
      color: white;
      box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);

      &:hover {
        background: darken(#f59e0b, 5%);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(245, 158, 11, 0.2);
      }

      &:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(245, 158, 11, 0.2);
      }

      &:disabled {
        background: @gray-400;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      i {
        font-size: 0.875rem;
      }
    }
  }
}

.ai-suggestion {
  display: flex;
  gap: 1rem;
  background: white;
  padding: 1.25rem;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  margin: 0 1rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border-left: 4px solid #7c3aed;
  min-height: 95px;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  }

  .ai-suggestion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.2);
  }

  .ai-suggestion-content {
    flex: 1;

    .ai-suggestion-title {
      font-weight: 600;
      color: #7c3aed;
      margin-bottom: 0.375rem;
      font-size: 0.9375rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .ai-suggestion-text {
      font-size: 0.875rem;
      color: #4b5563;
      line-height: 1.6;
    }
  }
}

.file-upload-hint {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid #1890ff;
}

.file-upload-hint i {
  margin-right: 8px;
  color: #1890ff;
}

/* 按钮加载状态 */
.btn-action.loading {
  opacity: 0.7;
  cursor: wait;
  background-color: #6b7280;
}

/* 按钮加载状态 */
.btn-action.btn-regenerate.loading {
  opacity: 0.7;
  cursor: wait;
  background-color: #6b7280;

  &:hover {
    background-color: #6b7280;
    transform: none;
  }
}

/* 重设旋转动画 */
.fa-spin {
  animation: fa-spin 1s linear infinite;
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 关键词标签样式 */
.keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  min-height: 32px;

  .keyword-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(67, 97, 238, 0.1);
    color: #4361ee;
    border-radius: 9999px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(67, 97, 238, 0.2);
    animation: tagEnter 0.3s ease-out;

    &:hover {
      background: rgba(67, 97, 238, 0.2);
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

      i.fa-times {
        color: #ef4444;
      }
    }

    i {
      font-size: 0.7rem;
      color: #4361ee;
      transition: color 0.2s ease;

      &.fa-tag {
        margin-right: 2px;
      }

      &.fa-times {
        margin-left: 2px;
      }
    }

    &.tag-highlight {
      animation: tagHighlight 1s ease-out;
    }
  }
}

/* 标签动画 */
@keyframes tagEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tagHighlight {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(@primary, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(@primary, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(@primary, 0);
  }
}

/* 标签过渡动画 */
.tag-fade-enter-active,
.tag-fade-leave-active {
  transition: all 0.3s ease;
}

.tag-fade-enter,
.tag-fade-leave-to {
  opacity: 0;
  transform: translateY(10px) scale(0.8);
}

.tag-fade-move {
  transition: transform 0.3s ease;
}

/* 题目卡片删除按钮样式 */
.delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  color: #94a3b8;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  border: 1px solid rgba(226, 232, 240, 0.8);
  pointer-events: none;

  &:hover {
    background-color: #ef4444;
    color: white;
    transform: translateY(-2px);
    opacity: 1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  i {
    font-size: 14px;
  }
}

.question-card:hover .delete-btn {
  opacity: 0.85;
  pointer-events: auto;
}

.quick-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;

  .btn-templates,
  .btn-quick-create {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid @gray-200;
    text-align: left;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    transition: all 0.25s ease;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border-radius: 8px;

    &:hover {
      transform: translateY(-2px);
      border-color: @primary-light;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

      .btn-icon-container {
        transform: scale(1.1);
      }
    }

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    &:hover:before {
      opacity: 1;
    }

    .btn-icon-container {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-right: 12px;
      transition: transform 0.25s ease;
      color: white;
    }

    .btn-text {
      display: flex;
      flex-direction: column;
    }

    .btn-title {
      font-size: 0.9375rem;
      font-weight: 600;
      color: @gray-800;
    }

    .btn-desc {
      font-size: 0.8125rem;
      color: @gray-600;
    }
  }

  .btn-templates {
    &:before {
      background: linear-gradient(to bottom, #4361ee, #3a0ca3);
    }

    .btn-icon-container {
      background: linear-gradient(135deg, #4361ee, #3a0ca3);
    }
  }

  .btn-quick-create {
    &:before {
      background: linear-gradient(to bottom, #f59e0b, #fbbf24);
    }

    .btn-icon-container {
      background: linear-gradient(135deg, #f59e0b, #fbbf24);
    }
  }
}

.input-with-icon .readonly {
  background-color: #f2f2f2;
  color: #666;
  cursor: not-allowed;
}

.ai-hint {
  font-size: 12px;
  color: #6366f1;
  margin-top: 4px;
  display: flex;
  align-items: center;

  i {
    position: static !important;
    margin-right: 5px;
    transform: none !important;
    color: #4f46e5 !important;
  }
}

.ai-hint:before {
  //   content: "\f544";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
  color: #4f46e5;
}

.modern-input.readonly {
  background-color: #f2f2f2;
  color: #666;
  cursor: not-allowed;
}

/* 文件卡片样式 */
.file-card {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin: 20px auto;
  width: 280px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  position: relative;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }

  .file-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;

    i {
      font-size: 24px;
      color: #4f46e5;
    }
  }

  .file-card-info {
    flex: 1;

    .file-card-name {
      font-weight: 500;
      color: #1e293b;
      font-size: 14px;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
    }

    .file-card-size {
      color: #64748b;
      font-size: 12px;
    }
  }

  .file-card-remove {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748b;

    &:hover {
      background: #ef4444;
      color: white;
    }

    i {
      font-size: 12px;
    }
  }
}

.btn-upload-file {
  background: #4f46e5;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  margin: 20px auto;

  i {
    margin-right: 8px;
    font-size: 16px;
  }

  &:hover {
    background: #4338ca;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  }
}

.file-upload-hint {
  display: flex;
  align-items: center;
  color: #64748b;
  font-size: 13px;
  margin: 8px auto;
  max-width: 430px;
  text-align: center;

  i {
    margin-right: 6px;
    color: #94a3b8;
  }
}

// 添加底部操作栏样式
.ai-generator-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid @gray-200;
  background: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

  .generation-hint {
    color: #3b5998;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
    background-color: #e7f3ff;
    border: 1px solid #c7ddff;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-weight: 500;

    i {
      color: #3b82f6;
    }
  }

  .btn-generate,
  .btn-save,
  .btn-reject,
  .btn-cancel {
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: @transition;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
  }

  .btn-generate {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);

    &:hover {
      background: linear-gradient(135deg, #4f46e5, #4338ca);
      transform: translateY(-1px);
      box-shadow: 0 4px 6px rgba(99, 102, 241, 0.3);
    }

    &:active {
      transform: translateY(0);
    }

    &:disabled {
      background: linear-gradient(135deg, #a5a6f6, #9691ee);
      cursor: not-allowed;
      transform: none;
      opacity: 0.7;
    }
  }

  .btn-save {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);

    &:hover {
      background: linear-gradient(135deg, #059669, #047857);
      transform: translateY(-1px);
      box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }

  .btn-reject {
    background: linear-gradient(135deg, #f87171, #ef4444);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);

    &:hover {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      transform: translateY(-1px);
      box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }

  .btn-cancel {
    background: white;
    color: @gray-700;
    border: 1px solid @gray-300;

    &:hover {
      background: @gray-50;
      border-color: @gray-400;
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }
  }

  // 响应式调整
  @media (max-width: 768px) {
    flex-direction: column-reverse;
    gap: 0.75rem;
    padding: 0.75rem;

    .btn-generate,
    .btn-save,
    .btn-reject,
    .btn-cancel {
      width: 100%;
      justify-content: center;
      margin-left: 0;
    }

    .generation-hint {
      width: 100%;
      justify-content: center;
      margin-top: 0.5rem;
    }
  }
}

// 移除旧的底部操作栏样式
.bottom-actions-bar {
  display: none;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;

  .header-left {
    display: flex;
    align-items: center;

    i {
      color: @primary;
      margin-right: 0.25rem;
      font-size: 0.9rem;
    }

    h3 {
      font-size: 0.95rem;
      font-weight: 600;
      color: @gray-700;
      margin: 0;
    }
  }

  .total-count {
    font-size: 0.8125rem;
    color: @gray-600;
    background: @gray-50;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    line-height: 1.2;

    .highlight {
      font-weight: 600;
      color: @primary;
    }
  }
}

.type-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.type-config-card {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid @gray-200;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 0.75rem;
  background-color: white;

  &:hover {
    border-color: @primary-light;
    box-shadow: @shadow-sm;
  }

  &.active {
    border-color: @primary;
    background-color: rgba(@primary, 0.05);

    .type-icon {
      color: white;
    }
  }

  .type-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .type-info {
    flex: 1;

    .type-name {
      display: block;
      font-weight: 500;
      color: @gray-800;
      font-size: 0.875rem;
    }

    .type-desc {
      display: block;
      font-size: 0.75rem;
      color: @gray-500;
      margin-top: 0.125rem;
    }
  }

  .type-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .count-btn {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      border: 1px solid @gray-300;
      background: white;
      color: @gray-700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;

      &:hover {
        background: @gray-100;
        color: @primary;
      }

      i {
        font-size: 0.625rem;
      }
    }

    .count-value {
      font-size: 0.875rem;
      font-weight: 500;
      color: @gray-800;
      min-width: 20px;
      text-align: center;
    }
  }
}

.quota-indicator {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: @radius-full;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: auto;

  &.quota-normal {
    background: rgba(66, 133, 244, 0.15);
    color: #1a56db;

    i {
      color: #1a56db;
    }

    .quota-count {
      font-weight: 600;
      color: #1a56db;
    }
  }

  &.quota-warning {
    background: rgba(@warning, 0.15);
    color: @warning;
    animation: pulse 1s infinite alternate;

    i {
      color: @warning;
      animation: pulse 1s infinite alternate;
    }

    .quota-count {
      font-weight: 600;
      color: @warning;
      animation: pulse-scale 1s infinite alternate;
    }
  }

  .quota-total {
    color: #3b82f6;
    font-weight: 600;
  }
}

/* 添加更多动画效果 */
@keyframes pulse-scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.type-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 0.5rem;
  box-shadow: @shadow-sm;
}

.custom-confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000; /* 增加 z-index 确保显示在最上层 */
  animation: fadeIn 0.3s ease-out;

  .confirm-dialog-content {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2),
      0 10px 10px -5px rgba(0, 0, 0, 0.1);
    animation: dialogEnter 0.3s ease-out;

    .confirm-dialog-header {
      padding: 1rem 1.5rem;
      border-bottom: 1px solid @gray-200;
      display: flex;
      align-items: center;
      background: @gray-100;
      color: @gray-800;

      .confirm-dialog-title {
        font-size: 1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .warning-icon {
        color: @warning;
      }
    }

    .confirm-dialog-body {
      padding: 1.5rem;
      color: @gray-700;
      line-height: 1.5;
      font-size: 0.9375rem;
    }

    .confirm-dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 1rem;
      padding: 1rem 1.5rem;
      border-top: 1px solid @gray-200;
      background-color: @gray-50;

      .btn-cancel,
      .btn-confirm {
        padding: 0.5rem 1rem;
        border-radius: 4px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
        font-size: 0.875rem;
      }

      .btn-cancel {
        background: white;
        color: @gray-700;
        border: 1px solid @gray-300;

        &:hover {
          background: @gray-100;
        }
      }

      .btn-confirm {
        background: @warning;
        color: white;

        &:hover {
          background: darken(@warning, 5%);
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialogEnter {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>